三、jQuery--jQuery实践--瀑布流布局

举报
hwJw19 发表于 2021/05/26 15:18:50 2021/05/26
【摘要】   实现方法:   1、JavaScript   2、jQuery   3、CSS多栏布局 法一: window.onload=function(){ waterfall('main','pin'); var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jp...

 

实现方法:

  1、JavaScript

  2、jQuery

  3、CSS多栏布局

法一:

window.onload=function(){ waterfall('main','pin'); var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]}; window.onscroll=function(){ if(checkscrollside()){ var oParent = document.getElementById('main');// 父级对象 for(var i=0;i<dataInt.data.length;i++){ var oPin=document.createElement('div'); //添加 元素节点 oPin.className='pin'; //添加 类名 name属性 oParent.appendChild(oPin); //添加 子节点 var oBox=document.createElement('div'); oBox.className='box'; oPin.appendChild(oBox); var oImg=document.createElement('img'); oImg.src='./images/'+dataInt.data[i].src; oBox.appendChild(oImg); } waterfall('main','pin'); }; }
}

/* parend 父级id pin 元素id
*/
function waterfall(parent,pin){ var oParent=document.getElementById(parent);// 父级对象 var aPin=getClassObj(oParent,pin);// 获取存储块框pin的数组aPin var iPinW=aPin[0].offsetWidth;// 一个块框pin的宽 var num=Math.floor(document.documentElement.clientWidth/iPinW);//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】 oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式:定宽+自动水平外边距 var pinHArr=[];//用于存储 每列中的所有块框相加的高度。 for(var i=0;i<aPin.length;i++){//遍历数组aPin的每个块框元素 var pinH=aPin[i].offsetHeight; if(i<num){ pinHArr[i]=pinH; //第一行中的num个块框pin 先添加进数组pinHArr }else{ var minH=Math.min.apply(null,pinHArr);//数组pinHArr中的最小值minH var minHIndex=getminHIndex(pinHArr,minH); aPin[i].style.position='absolute';//设置绝对位移 aPin[i].style.top=minH+'px'; aPin[i].style.left=aPin[minHIndex].offsetLeft+'px'; //数组 最小高元素的高 + 添加上的aPin[i]块框高 pinHArr[minHIndex]+=aPin[i].offsetHeight;//更新添加了块框后的列高
 } }
}

/**** *通过父级和子元素的class类 获取该同类子元素的数组 */
function getClassObj(parent,clsName){ var obj=parent.getElementsByTagName('*');//获取 父级的所有子集 var pinS=[];//创建一个数组 用于收集子元素 for (var i=0;i<obj.length;i++) {//遍历子元素、判断类别、压入数组 if (obj[i].className==clsName){ pinS.push(obj[i]); } }; return pinS;
}
/**** *获取 pin高度 最小值的索引index */
function getminHIndex(arr,minH){ for(var i in arr){ if(arr[i]==minH){ return i; } }
}


function checkscrollside(){ var oParent=document.getElementById('main'); var aPin=getClassObj(oParent,'pin'); var lastPinH=aPin[aPin.length-1].offsetTop+Math.floor(aPin[aPin.length-1].offsetHeight/2);//创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//注意解决兼容性 var documentH=document.documentElement.clientHeight;//页面高度 return (lastPinH<scrollTop+documentH)?true:false;//到达指定高度后 返回true,触发waterfall()函数
}
View Code

通过类名去获取元素的方法:

<!doctype html>
<html>

<head> <meta charset="UTF-8"> <title>Document</title>
</head>

<body> <ul id="list"> <li class="on">1</li> <li class="select">2</li> <li class="on">3</li> <li>4</li> </ul> <p class="on">class为on的p标签</p>
</body>

</html>
<script type="text/javascript">
window.onload = function() { var len1 = getByClass("on", "list"); alert(len1.length); // 结果等于2为正确 var len2 = getByClass("on"); alert(len2.length); // 结果等于3为正确
}

function getByClass(clsName, parent) { //定义函数getByClass()实现获取document或指定父元素下所有class为on的元素   var clsArr = []; if (parent) { var oParent = document.getElementById(parent); var oClass = oParent.getElementsByTagName("*"); for (var i = 0; i < oClass.length; i++) { if (oClass[i].className == clsName) { clsArr.push(oClass[i]) } } return clsArr; } else { var oClass = document.getElementsByTagName("*"); for (var i = 0; i < oClass.length; i++) { if (oClass[i].className == clsName) { clsArr.push(oClass[i]) } } return clsArr; }
}
</script>
View Code

 

法二:

$(window).on("load", function() { waterfall('main', 'pin'); var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] }; window.onscroll = function() { if (checkscrollside()) { $.each(dataInt.data, function(index, value) { var $oPin = $('<div>').addClass('pin').appendTo($("#main")); var $oBox = $('<div>').addClass('box').appendTo($oPin); $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox); }); waterfall(); }; }
});

/* parend 父级id pin 元素id
*/
function waterfall(parent, pin) { var $aPin = $("#main>div"); var iPinW = $aPin.eq(0).outerWidth(); // 一个块框pin的宽 var num = Math.floor($(window).width() / iPinW); //每行中能容纳的pin个数【窗口宽度除以一个块框宽度】 //oParent.style.cssText='width:'+iPinW*num+'px;margin:0 auto;';//设置父级居中样式:定宽+自动水平外边距 $("#main").width(iPinW * num).css("margin","0 auto"); // $("#main").css({ // 'width:': iPinW * num, // 'margin':'0 auto' // }); var pinHArr = []; //用于存储 每列中的所有块框相加的高度。
 $aPin.each(function(index, value) { var pinH = $aPin.eq(index).outerHeight(); if (index < num) { pinHArr[index] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr } else { var minH = Math.min.apply(null, pinHArr); //数组pinHArr中的最小值minH var minHIndex = $.inArray(minH, pinHArr); $(value).css({ 'position': 'absolute', 'top': minH + 15, 'left': $aPin.eq(minHIndex).position().left }); //数组 最小高元素的高 + 添加上的aPin[i]块框高 pinHArr[minHIndex] += $aPin.eq(index).outerHeight() + 15; //更新添加了块框后的列高
 } });
}

function checkscrollside() { var $aPin = $("#main>div"); var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2); //创建【触发添加块框函数waterfall()】的高度:最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载) var scrollTop = $(window).scrollTop() //注意解决兼容性 var documentH = $(document).width(); //页面高度 return (lastPinH < scrollTop + documentH) ? true : false; //到达指定高度后 返回true,触发waterfall()函数
}
View Code

 

法三:

.container { -webkit-column-width: 197px; -moz-column-width: 197px; -o-column-width: 197px; -ms-column-width: 197px;
/* -webkit-column-gap: 5px; -moz-column-gap: 5px; -o-column-gap: 5px; -ms-column-gap: 5px; */

}


/*数据块 砖块*/

.container { padding: 10px; } .container div { padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 0 5px #ccc; width:165px; margin-bottom:10px; } .container div img { display: block; width: 165px; height: auto; }
View Code

 

CSS3和JS瀑布流实现方式比较:

JS原生方式:

  1 需要计算列数=浏览器窗口的宽度/图片宽度

   图片定位是需要根据每一列数据块的高度计算接下来图片的位置

  2 图片排序是按照图片计算的位置横向排序,位置是计算出来的比较规范

CSS3方式:

  1 不需要计算,浏览器自动计算,只需设置列宽,性能高

  2 列宽随着浏览器窗口大小进行改变,用户体验不好

  3 图片排序按照垂直顺序排序,打乱图片显示顺序

  4 图片加载还是依靠JS来完成

  5 浏览器兼容也不是很好

(说明:由于使用CSS3多栏布局来实现瀑布流有很大的局限性,所以上面的CSS3实现方式的代码只有多栏分列的部分,没有继续完成js的部分,最好还是使用JS或者jQuery来完成即可。)

  

 

文章来源: www.cnblogs.com,作者:姜腾腾,版权归原作者所有,如需转载,请联系作者。

原文链接:www.cnblogs.com/jiangtengteng/p/5430400.html

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200