瀑布流布局--jQuery寫法

標籤：style   blog   io   ar   color   os   使用   sp   java   

HTML

 1 <div id="main"> 2         <div class="box"> 3             <div class="pic"> 4                 <img src="images/0.jpg" alt=""> 5             </div> 6         </div> 7         <div class="box"> 8             <div class="pic"> 9                 <img src="images/1.jpg" alt="">10             </div>11         </div>12         <div class="box">13             <div class="pic">14                 <img src="images/2.jpg" alt="">15             </div>16         </div>17         <div class="box">18             <div class="pic">19                 <img src="images/3.jpg" alt="">20             </div>21         </div>22         <div class="box">23             <div class="pic">24                 <img src="images/4.jpg" alt="">25             </div>26         </div>27         <div class="box">28             <div class="pic">29                 <img src="images/2.jpg" alt="">30             </div>31         </div>32 </div>

CSS

 1 * { 2     margin: 0; 3     padding: 0; 4 } 5 #main { 6     position: relative; 7  8 } 9 .box {10     padding:15px 0 0 15px;11     float:left;12 }13 .pic {14     padding: 10px;15     border: 1px solid #ccc;16     border-radius: 5px;17     box-shadow: 0px 0px 5px #ccc;18     img {19         width:165px;20         height:auto;21     }22 }

JavaScript

 1 $(window).on("load",function () { 2     waterfall(); 3     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]} 4     //類比json資料; 5     $(window).on("scroll",function () { 6         if(checkScrollSlide){ 7             $.each(dataInt.data,function (key,value) { 8                 var oBox=$("<div>").addClass("box").appendTo($("#main")); 9                 //jQuery支援連綴,隱式迭代;10                 var oPic=$("<div>").addClass(‘pic‘).appendTo($(oBox));11                 $("<img>").attr("src","images/"+$(value).attr("src")).appendTo(oPic);12             });13             waterfall();14         }15     })16 });17 //流式布局主函數;18 function waterfall () {19     var $boxs=$("#main>div");20     //擷取#main元素下的直接子項目div.box;21 22     //擷取每一列的寬度;23     var w=$boxs.eq(0).outerWidth();24     //outerWidth()擷取包含padding和border在內的寬度;25     //var w=$boxs.eq(0).width();26     //width()只能擷取給元素定義的寬度;27 28     var cols=Math.floor($(window).width()/w);29     //擷取多少列;30     $("#main").width(w*cols).css("margin","0 auto");31     //設定#main元素的寬度和置中樣式;32 33     var hArr=[];34     //每一列高度的集合;35     $boxs.each(function (index,value) {36     //遍曆每一個box元素;37     //為了找到之前所有元素的最低點,然後將本元素設定到最低點之下;38         var h=$boxs.eq(index).outerHeight();39         //每一個box元素的高,40         if (index<cols) {41             hArr[index]=h;42             //確定每列第一個元素的高度;43         } else{44             var minH=Math.min.apply(null,hArr);45             //得出列高數組中的最小高度;46             var minHIndex=$.inArray(minH,hArr);47             //$.inArray()方法得出元素(minH)在數組(hArr)中的index值;48             //console.log(value);49             //此時的value是第一行之後的所有的box元素的DOM對象!;50             $(value).css({51             //$(value):將DOM對象轉換成jQuery對象,才能繼續使用jQuery方法;52                 "position":"absolute",53                 "top":minH+"px",54                 "left":minHIndex*w+"px"55             });56             hArr[minHIndex]+=$boxs.eq(index).outerHeight();57             //最低高元素的高度+剛添加到最低高度下的元素的高度=新的列高;58         };59     });60     // console.log(hArr);61 };62 function checkScrollSlide () {63     var $lastBox=$("#main>div").last();64     var lastBoxDis=$lastBox.offset().top+Math.floor($lastBox.outerHeight()/2);65     var scrollTop=$(window).scrollTop();66     var documentH=$(window).height();67     return (lastBoxDis<scrollTop+documentH)?true:false;68 }

 

瀑布流布局--jQuery寫法