Posted in Javascript onDecember 12, 2014
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数据; $(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(); } }) }); //流式布局主函数; function waterfall () { var $boxs=$("#main>div"); //获取#main元素下的直接子元素div.box; //获取每一列的宽度; var w=$boxs.eq(0).outerWidth(); //outerWidth()获取包含padding和border在内的宽度; //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); //得出列高数组中的最小高度; var minHIndex=$.inArray(minH,hArr); //$.inArray()方法得出元素(minH)在数组(hArr)中的index值; //console.log(value); //此时的value是第一行之后的所有的box元素的DOM对象!; $(value).css({ //$(value):将DOM对象转换成jQuery对象,才能继续使用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; }
详细解释清仔细参考注释吧,我就不单独再拉出来写了。
jQuery实现瀑布流布局
- Author -
hebedich声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@