<!doctype html> <html> <head> <meta charset="utf-8"> <title>瀑布流布局</title> <style type="text/css"> body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微软雅黑"; } /*瀑布流布局样式*/ #lxf-box { position: relative; 1000px; margin:0 auto; } #lxf-box li { background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; float: left; } h3 { padding-top: 8px; } img { 200px; height: auto; display: block; border: 0 } /*css3动画:由于是css3制作的所以兼容性不保证 要想兼容性好 请自己做成gif动画加载图*/ /*li{ -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }*/ #loading { display:none; line-height: 30px; background: #000; color:#fff; text-align: center; height: 30px; 100%; position:fixed; bottom:0; opacity:0.8; } </style> <script src="http://www.iiwnet.com/templets/niu/js/jquery.min.js"type="text/javascript"></script> </head> <body> <ul id="lxf-box"> <li> <img src="../images/1.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/2.jpeg"/> <h3>图片标题</h3> </li> <li> <img src="../images/3.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/4.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/5.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/6.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/7.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/8.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/9.jpg"> <h3>图片标题</h3> </li> <li> <img src="../images/1.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/5.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/8.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/7.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/8.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/9.jpg"> <h3>图片标题</h3> </li> <li> <img src="../images/5.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/8.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/7.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/8.jpg"/> <h3>图片标题</h3> </li> <li> <img src="../images/7.jpg"/> <h3>图片标题</h3> </li> </ul> <div id="loading">正在加载……</div> <script> /* 原理:1.把所有的li的高度值放到数组里面 2.第一行的top都为0 3.计算高度值最小的值是哪个li 4.把接下来的li放到那个li的下面 */ $(document).ready(function(){ function rank(){ var box = $("#lxf-box"); //jquery对象.get(index)可以获得DOM元素,也可以写成jquery对象[index] var box_W = box[0].offsetWidth; //获得ul的实际宽度。使用Dom元素.offsetWidth获得宽度包括border、padding、width,而jquery对象.width()获得宽度不包括border和padding。 var margin = 10; var element = $("li"); var element_W = element[0].offsetWidth+margin; element.css("position","absolute");//注意ul要position为relative,这样li是相对于ul进行定位 var num = box_W/element_W|0;//获得一行可以放li的个数 var heightArray = [];//该数组存放每列的高度值 for(var i = 0; i < element.length; i++){ var element_H = element[i].offsetHeight;//获得高度值 if(i<num){ //第一行的li,top为0,left为左边li的个数*li的宽度 heightArray[i] = element_H; element.eq(i).css({"top":0,"left":i*element_W}); }else{ //非首行,首先找到最小高度的列(称为minLi),将新li加到minLi的下面。新li,top为minLi的高度,left为minLi的左边li的个数*li的宽度。最后不要忘记将新li的高度加到minLi高度中。 var min_H = Math.min.apply(null,heightArray);//在所有列中,获得最小高度 var minKey = getArraykey(heightArray, min_H);//找到对应最小高度所在的列 heightArray[minKey] += element_H+margin;//最小高度加上新图片的高度 element.eq(i).css({"top":min_H+margin,"left":minKey*element_W}); } $("h3").eq(i).text("编号:"+i+",高度:"+element_H); $("li").animate({opacity:1}); } } function getArraykey(s,min){ for(var e in s){ if(s[e] == min){ return e; } } } function getMore(){ var all = $("li").length; if(all >= 50){ isMore = false; $("#loading").html("加载完毕!"); setTimeout(function(){ $("#loading").slideDown(); },400); setTimeout(function(){ $("#loading").slideUp(); },2000); }else{ isMore = true; $("#loading").show(); var json = "../a.json"; $.getJSON(json,function(data){ $.each(data,function(i){ console.log(data.length); var url=data[i].url; var html="<li>"+ "<img src="+url+" >"+ "<h3>图片标题</h3>"+ "</li>"; $("#lxf-box").append(html); $("#loading").hide(); }); rank(); }); } } /* window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。 这里一定要用onload,因为图片不加载完就不知道高度值 */ window.onload = function() {rank();}; window.onresize = function() {rank();}; var isMore = true; var allLi = $("li").length; if(allLi > 50){ isMore = false; }else{ isMore = true; } /*滚动到底部的时候*/ $(window).bind("scroll",function(){ if(($(document).scrollTop() + $(window).height()) > $(document).height() - 10 && isMore) { getMore(); } }); }); </script> </body> </html>
注意一定要将文件放到Aptana或者eclipse,单纯地打开test.html是不会有效果的,要将test.html放到pages文件夹下图片路径才正确。
下载地址:https://files.cnblogs.com/qduanlu/%E7%80%91%E5%B8%83%E6%B5%81.zip