炫酷的jquery瀑布流

最近做了一个瀑布流效果，思路很简单

首先计算屏幕一行可以放多少个图片，然后在第二行开始，计算每一列的高度并取出最小值，将新图片加载在最小列高度下，如此循环，并且设定一个条件，当滑动到一定距离后，开始重新加载。当然中间我们可以加上一些动画效果，让网页看起来更炫酷一些。    

html'比较简单，这里用了li元素，给每个li外围设置了padding，内部容器设定颜色，以达成元素间隔效果，这样避免了使用maring元素最后一个还要特殊处理，当然我们还可以通过给ul设置负的margin值来解决这个问题，不过由于后面要进行很多处理所以设置了padding。

<div class="container">
<ul>
 <!-- <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/1.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
   <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/2.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/3.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/4.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/5.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/6.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/7.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/8.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/9.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/10.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>
  <li>
    <div class='wrap'>
      <div class="img">
         <img src="images/11.jpg" />
      </div>
      <div class="text">瀑布流测试demo</div>
    </div>
  </li>-->
  
  
</ul>
</div>

中间的li列表隐藏掉了，可有可无，效果都一样。

下面主要是js；

var number=0;
    var sindex=0;
    var arr=[];                                      //存放每列高度的数组
var data = [
                {'src':'1.jpg','title':'瀑布流测试'},
                {'src':'2.jpg','title':'瀑布流测试'},
                {'src':'3.jpg','title':'瀑布流测试'},
                {'src':'4.jpg','title':'瀑布流测试'},
                {'src':'5.jpg','title':'瀑布流测试'},
                {'src':'6.jpg','title':'瀑布流测试'},
                {'src':'7.jpg','title':'瀑布流测试'},
                {'src':'8.jpg','title':'瀑布流测试'},
                {'src':'9.jpg','title':'瀑布流测试'},
                {'src':'10.jpg','title':'瀑布流测试'},
                {'src':'11.jpg','title':'瀑布流测试'}
              ];

第一步设定了变量，number为每个元素的索引，arr为存储每列高度数组，并通过data数组来模拟加载。calc是执行计算的函数。

window.onscroll=function(){        
        if($(window).scrollTop()+$(window).height()+20>$(document).height()){
        //alert(23)
            $.each(data,function(i,val){
                var sHtml='<li><div class="wrap"><div class="img"><img src="images/'+val.src+'"/></div>'
                sHtml+='<div class="text">'+val.title+number+'</div></div></li>'
                $("ul").append(sHtml)
                number++                
            })
            calc()
        }
    }
    window.onload=function(){            
        //alert(23)
            $.each(data,function(i,val){
                var sHtml='<li><div class="wrap"><div class="img"><img src="images/'+val.src+'"/></div>'
                sHtml+='<div class="text">'+val.title+number+'</div></div></li>'
                $("ul").append(sHtml)
                number++                
            })
            setTimeout(calc,10)        
    }

在页面加载，页面滚动到下部时，我们循环生成li元素，并且执行calc方法，在页面加载时，对calc函数进行了延时处理，如果直接执行，会出现计算错误，不知道还有没有更好的办法解决。

function calc(){                        
        var $_li=$('li');
        var length=$_li.length;
        var li_width=$("li").eq(0).outerWidth();
        var pad_width=$("li").eq(0).width();
        var documentWidth=$(window).width();
        var column=Math.floor(documentWidth/li_width);   //每一行可显示的图片数
        $("ul").css("width",column*li_width) ;           //计算外围容器宽度                          
          for(i=sindex;i<length;i++){            
              if(i<column){                                //第一列图片正常排列
                  arr[i]=$_li.eq(i).outerHeight();
                  $_li.eq(i).css({"position":'absolute',                         //元素设为绝对定位
                        "left":i*li_width,
                        "top":100,
                        "opacity":"0",
                        'width':"0px"                    
                        }).addClass("ani")
                  $_li.eq(i).animate({
                           opacity:"1",
                           top:"0px",
                           left:i*li_width, 
                           width:pad_width                 
                  },700)                              
              }else{                         
                  var minHeight=Math.min.apply(null,arr)  //计算最小高度确定位置
                  //console.log(arr)                      
                  var index=compare(minHeight,arr);    
                  put($_li,i,index,column,minHeight)
                  arr[index]+=$_li.eq(i).outerHeight()                 
              }    
              console.log(minHeight)          
        }
        sindex=length
        
    }

主要的元素，calc元素，通过屏幕宽度与li宽度进行每行可放置li的数量，其中第一行的元素直接赋值，每个元素的left为别为i*300，其中有些属性查了些资料才弄清楚。

jquery中获取元素宽度为width()，这个宽度只包括元素的width部分，而outerWidth（）获取的宽度包括元素的padding与border，outerWidth（true）则默认包括margin。

在js中对应为offsetWidth。

获取元素相对于文档（document）的距离在jquery方法分别为offset().top,offset().left,js中为offsetHeight，offsetLeft。

在排列过程，我添加了透明度+top值得动画，同时运用css3属性进行了反转动画（scale(-1,1)效果等同于rotateY(180)）.

在calc中运用了方法compare与put。如下：

function compare(height,sum){        
        var $_length=sum.length;
        for(j=0;j<$_length;j++){
            if(sum[j]==height){
               return j
            }
        }
    }
    function put(obj,index,minIndex,column,height){
        obj.eq(index).css({"position":'absolute',                         //元素设为绝对定位
                        "left":obj.eq(Math.floor(column/2)).css("left"),
                        "top":parseInt(height)+100,
                        "opacity":"0",
                        'width':"0px"                    
                        }).addClass("ani")
        obj.eq(index).stop().animate({
                 opacity:"1",
                 top:height,
                 left:obj.eq(minIndex).css("left"), 
                 width:"280px"                 
        },700)                
    }

css写的比较随意：

<style>
*{margin:0px;padding:0px}
body,html{background-color:#F5F5DC}
.container{margin:0px auto}
ul{margin:20px auto;width:auto;position:relative}
li{list-style-type:none;width:280px;padding:10px;float:left;margin-top:10px}
.wrap{background-color:#fff;box-shadow:5px 5px 10px #ccc;border-radius:10px;}
.img{padding:10px}
.img img{width:260px;border-radius:10px}
.text{height:40px;line-height:40px;text-align:center;font-family:"微软雅黑";font-size:18px}
.img img:hover{-webkit-animation:fadein ease-in-out 1s;-moz-animation:fadein ease-in-out 1s;-ms-animation:fadein ease-in-out 1s;-o-animation:fadein ease-in-out 1s}
.ani{-webkit-animation:scale 1s ease-in-out;-moz-animation:scale 1s ease-in-out;-ms-animation:scale 1s ease-in-out;-o-animation:scale 1s ease-in-out}
@-webkit-keyframes fadein{
    0%{opacity:1}
    20%{opacity:0.5}
    100%{opacity:1}
}
@-moz-keyframes fadein{
    0%{opacity:1}
    20%{opacity:0.5}
    100%{opacity:1}
}
@-ms-keyframes fadein{
    0%{opacity:1}
    20%{opacity:0.5}
    100%{opacity:1}
}
@-o-keyframes fadein{
    0%{opacity:1}
    20%{opacity:0.5}
    100%{opacity:1}
}
@-webkit-keyframes scale{
    0%{-webkit-transform:scale(-1,1)}
    50%{-webkit-transform:scale(1,1)}
}
@-moz-keyframes scale{
    from{-moz-transform:scale(-1,1)}
    to{-moz-transform:scale(1,1)}
}
@-ms-keyframes scale{
    from{-ms-transform:scale(-1,1)}
    to{-ms-transform:scale(1,1)}
}
@-o-keyframes scale{
    from{-o-transform:scale(-1,1)}
    to{-o-transform:scale(1,1)}
}
</style>

本来想按面向对象方向写，写着写着又写成了乱七八糟，没有专门学过编程，还是非常欠缺这个细胞的a ，努力吧！

有错误欢迎随时指出。

另自己新建立了一个qq群：85530789,欢迎志同道合的朋友一起多多交流技术。（现在好多技术群基本都聊不了多少真正的技术话题，失望了）