JS、JQ、CSS3三种方法实现瀑布流布局

此文主要介绍三种（JS,JQ,CSS3）实现瀑布流布局的方法（三种方法均可自适应窗口）：

此三种方法HTML部分均相同，所以先贴出HTML部分，该部分比较简单：使用简单的ul>li就好，需要注意的是，li需要足够多，以让窗口出现滚动条，滚动滚动条后加载图片

<ul class="main" id="main">
            <li class="box">
                <div class="pic">
                    <img src="img/0.jpg"/>
                </div>
            </li>//n个li标签
</ul>

现在加上简单的样式就好，JS与JQ方法实现的CSS样式相同：（当然CSS样式随性就好）

 1  1 *{
 2  2     margin: 0;
 3  3     padding: 0;
 4  4     box-sizing: border-box;
 5  5     -webkit-box-sizing: border-box;
 6  6     -moz-box-sizing: border-box;
 7  7 }
 8  8 .main{
 9  9     margin: 0 auto;
10 10     position: relative;
11 11 }
12 12 li{
13 13     list-style: none;
14 14     display: block;
15 15     float: left;
16 16 }
17 17 li,.pic{
18 18     padding: 20px 10px;
19 19 }
20 20 .pic{
21 21     box-shadow: 0px 0px 5px #777;
22 22     border-radius: 10px/10px;
23 23 }
24 24 img{
25 25     width: 180px;
26 26     display: block;
27 27     border: 0;
28 28     border-radius: 5px/5px;
29 29     box-shadow: 3px 3px 5px #777;
30 30 }

好啦，现在进入正题，实现瀑布流布局效果

方法一：JS实现

代码如下 ：

 1 window.οnlοad=function(){
 2     var parent=document.getElementById('main');//获取id为main的元素
 3     var boxArr=parent.children;//获取所有li.box    
 4     var windowW=document.documentElement.clientWidth || document.body.clientWidth;//获取窗口宽度 
 5     var imgData= {'data': [{'src':'31.jpg'},{'src':'32.jpg'},{'src':'26.jpg'},{'src':'24.jpg'},{'src':'28.jpg'},{'src':'29.jpg'},{'src':'30.jpg'}]};
 6     //滚动条事件
 7     window.οnscrοll=function(){
 8         if (checkLoad(boxArr)) {
 9             for(var i in imgData.data){
10                 var oBox = document.createElement('li');
11                 oBox.className = 'box';
12                 oBox.innerHTML = '<div class="pic"><img src="img/'+imgData.data[i].src+'"></div>';
13                 parent.appendChild(oBox);
14             }
15             waterFall(parent,boxArr,windowW);//加载出来的图片，再次调用图片排列函数
16         }
17     }
18     waterFall(parent,boxArr,windowW);//调用函数图片排列函数
19 }
20 //窗口改变事件
21 window.onresize = function(){//窗口大小改变时自动调整图片列数
22     var parent=document.getElementById('main');//获取id为main的元素
23     var boxArr=parent.children;//获取所有li.box
24     var windowW=windowW=document.documentElement.clientWidth || document.body.clientWidth;
25     waterFall(parent,boxArr,windowW);
26 }
27 //排列图片位置
28 function waterFall(parent,boxArr,windowW){    
29     var boxW=boxArr[0].offsetWidth;//获取单个box宽
30     var cols=Math.floor(windowW/boxW);//计算图片列数
31     parent.style.width=boxW*cols+'px';
32     var hArr=[];//存储li.box所有高度
33     for (var i in boxArr) {
34         if (i<cols) {//获取第一行 所有高度
35             hArr[i]=boxArr[i].offsetHeight;
36         } else{
37             var minH=Math.min.apply(Math,hArr);//获取最小hArr
38             var minHIndex=getMinHIndex(hArr,minH);//获取最小hArr值索引
39             boxArr[i].style.cssText+='position:absolute;top:'+minH+'px;left:'+minHIndex*boxW+'px;';//将后一张图片放在最小高度图片之后 
40             hArr[minHIndex]+= boxArr[i].offsetHeight; //添加元素之后更新hArr，获取最小高度
41         }
42     }
43 }
44 //获取最小hArr值索引
45 function getMinHIndex(arr,val){
46     for(var i in arr){
47         if (arr[i]==val) return i;            
48     }
49 }
50 //判断是否满足加载图片条件
51 function checkLoad(boxArr){
52     var lastBoxH=boxArr[boxArr.length-1].offsetTop;//最后一张图片刚要出来时加载之后的图片
53     var windowH = document.documentElement.clientHeight || document.body.clientHeight;
54     var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
55     return lastBoxH<windowH+scrollTop? true:false;//最后一张图片高度小于窗口高度+滚动条高度时，加载图片
56 }

方法二：JQ实现，与JS实现原理相同，

还是直接贴代码吧：

 1 $(window).load(function(){//如果写成$(document).ready(),表示文档准备就绪，图片并未加载，获取到图片高度均为0    
 2     var parent=$('#main');
 3     var windowW=$(window).width();
 4     var jsonImg={'data':[{'src':'31.jpg'},{'src':'32.jpg'},{'src':'26.jpg'},{'src':'24.jpg'},{'src':'28.jpg'},{'src':'29.jpg'},{'src':'30.jpg'}]}
 5     $(window).on('scroll',function(){
 6         if (checkLoad(parent.children())) {
 7             for(var i in jsonImg.data){
 8                 var oBox=$('<li class="box"></li>');
 9                 oBox.html('<div class="pic"><img src="img/'+jsonImg.data[i].src+'"/></div>');                
10                 parent.append(oBox);                
11             }
12             waterFall(parent,windowW);
13         }
14     })
15     waterFall(parent,windowW);    
16 });
17 //窗口改变事件
18 $(window).resize(function(){
19     var parent=$('#main');
20     var windowW=$(window).width();    
21     waterFall(parent,windowW);
22 });
23 function waterFall(parent,windowW){
24     var boxW=parent.children().eq(0).outerWidth();
25     var cols=Math.floor(windowW/boxW);
26     parent.css({'width':boxW*cols});
27     var  hArr=[];
28     parent.children().each(function(index,dom){//遍历数组
29         if (index<cols) {
30             hArr[index]=$(dom).outerHeight();
31         } else{
32             var minH=Math.min.apply(null,hArr);
33             var minHIndex=$.inArray(minH,hArr);//获取最小值下标
34             $(dom).css({'position':' absolute','left':minHIndex*boxW,'top':minH});
35             hArr[minHIndex]+= $(dom).outerHeight();            
36         }
37     });
38 }
39 //判断是否加载
40 function checkLoad(boxArr){
41     var lastBoxH=boxArr.last().offset().top;
42     var windowH=$(window).height();
43     var scrollTop=$(window).scrollTop();
44     return  lastBoxH<(windowH+scrollTop)?true:false;
45 }

方法三：CSS实现，使用column属性，使用多兰布局，与JS,JQ的css几乎一样，只是在ul中加了column属性 ，当然，滚动滚动条，图片的加载还需要通过JQ或JS来实现，增加的样式如下：

1 .main{
2     margin: 0 auto;
3     position: relative;
4     margin: 0 auto;
5     column-width:200px;
6     -webkit-column-width:200px;
7     -moz-column-width:200px;
8 }

这样就简单记录了一下三种实现瀑布流布局的方法

 

转载于:https://www.cnblogs.com/zou1052265451/p/6869412.html