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 }
时间: 2024-10-28 14:38:38