<!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