jQuery實現(xiàn)瀑布流布局

更新時間：2014年12月12日 14:50:50 投稿：hebedich

上篇文章我們介紹了使用原生的javascript實現(xiàn)了圖片瀑布流效果，本文我們來用jQuery來實現(xiàn)同樣的效果。

HTML

 <div id="main">

         <div class="box">

             <div class="pic">

                 <img src="images/0.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/1.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/2.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/3.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/4.jpg" alt="">

             </div>

         </div>

         <div class="box">

             <div class="pic">

                 <img src="images/2.jpg" alt="">

             </div>

         </div>

 </div>

CSS

復制代碼代碼如下:

 * {

     margin: 0;

     padding: 0;

 }

 #main {

     position: relative;

 }

 .box {

     padding:15px 0 0 15px;

     float:left;

 }

 .pic {

     padding: 10px;

     border: 1px solid #ccc;

     border-radius: 5px;

     box-shadow: 0px 0px 5px #ccc;

     img {

         width:165px;

         height:auto;

     }

 }

JavaScript

復制代碼代碼如下:

 $(window).on("load",function () {

     waterfall();

     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}

     //模擬json數(shù)據(jù);

     $(window).on("scroll",function () {

         if(checkScrollSlide){

             $.each(dataInt.data,function (key,value) {

                 var oBox=$("<div>").addClass("box").appendTo($("#main"));

                 //jQuery支持連綴,隱式迭代;

                 var oPic=$("<div>").addClass('pic').appendTo($(oBox));

                 $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);

             });

             waterfall();

         }

     })

 });

 //流式布局主函數(shù);

 function waterfall () {

     var $boxs=$("#main>div");

     //獲取#main元素下的直接子元素div.box;

     //獲取每一列的寬度;

     var w=$boxs.eq(0).outerWidth();

     //outerWidth()獲取包含padding和border在內(nèi)的寬度;

     //var w=$boxs.eq(0).width();

     //width()只能獲取給元素定義的寬度;

     var cols=Math.floor($(window).width()/w);

     //獲取多少列;

     $("#main").width(w*cols).css("margin","0 auto");

     //設置#main元素的寬度和居中樣式;

     var hArr=[];

     //每一列高度的集合;

     $boxs.each(function (index,value) {

     //遍歷每一個box元素;

     //為了找到之前所有元素的最低點,然后將本元素設置到最低點之下;

         var h=$boxs.eq(index).outerHeight();

         //每一個box元素的高,

         if (index<cols) {

             hArr[index]=h;

             //確定每列第一個元素的高度;

         } else{

             var minH=Math.min.apply(null,hArr);

             //得出列高數(shù)組中的最小高度;

             var minHIndex=$.inArray(minH,hArr);

             //$.inArray()方法得出元素(minH)在數(shù)組(hArr)中的index值;

             //console.log(value);

             //此時的value是第一行之后的所有的box元素的DOM對象!;

             $(value).css({

             //$(value):將DOM對象轉(zhuǎn)換成jQuery對象,才能繼續(xù)使用jQuery方法;

                 "position":"absolute",

                 "top":minH+"px",

                 "left":minHIndex*w+"px"

             });

             hArr[minHIndex]+=$boxs.eq(index).outerHeight();

             //最低高元素的高度+剛添加到最低高度下的元素的高度=新的列高;

         };

     });

     // console.log(hArr);

 };

 function checkScrollSlide () {

     var $lastBox=$("#main>div").last();

     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);

     var scrollTop=$(window).scrollTop();

     var documentH=$(window).height();

     return (lastBoxDis<scrollTop+documentH)?true:false;

 }