使用jQuery制作瀑布流效果，这里需要引入jQuery库。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery瀑布流-布局</title>
<script src="jquery.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div class="box">
<div class="content">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/1.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/2.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/3.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/4.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/5.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/6.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/7.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/8.jpg">
</div>
</div>
<div class="box">
<div class="content">
<img src="img/9.jpg">
</div>
</div>
</div>
</body>
</html>
style.css
* {
margin: 0;
padding: 0;
}
#container {
position: relative;
margin: 10px auto;
}
.box {
float: left;
}
.content {
margin: 10px;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 5px #ccc;
border-radius: 5px;
}
.content img {
width: 190px;
height: auto;
}app.js
/**
* Created by DreamBoy on 2016/1/26.
*/
$(document).ready(function() {
$(window).on("load", function() {
/*var test = document.getElementsByClassName("box");
console.log(test[0]);*/
imgLocation();
//模拟网络获取数据
//json字符串——一种网络传输数据的协议格式
var imgData = {"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},
{"src":"4.jpg"},{"src":"5.jpg"},{"src":"6.jpg"},{"src":"7.jpg"},
{"src":"8.jpg"},{"src":"9.jpg"}]};
window.onscroll = function() {
if(scrollside()) {
$.each(imgData.data,function(index,value) {
var box = $("<div>").addClass("box").appendTo("#container");
var content = $("<div>").addClass("content").appendTo(box);
//console.log(value);
//console.log("./img/"+$(value).attr("src"));
$("<img>").attr("src", "./img/"+$(value).attr("src")).appendTo(content);
});
imgLocation();
}
};
});
});
function scrollside() {
var box = $(".box");
//var lastboxHeight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2);
var lastboxHeight = box.last().get(0).offsetTop + box.last().height() / 2;
//当前document的高度
var documentHeight = $(window).height();
//被卷去的内容的高度
var scrollHeight = $(window).scrollTop();
/*console.log("$(window).height()" + $(window).height());
console.log("$(document).height()" + $(document).height());*/
/*console.log("box.last().get(0).offsetTop: " + box.last().get(0).offsetTop);
console.log("Math.floor(box.last().height() / 2): " + Math.floor(box.last().height() / 2));
console.log("lastboxHeight: " + lastboxHeight);
console.log("scrollHeight: " + scrollHeight);
console.log("documentHeight: " + documentHeight);
console.log("scrollHeight + documentHeight: " + (scrollHeight + documentHeight));*/
return lastboxHeight <= scrollHeight + documentHeight;
}
function imgLocation() {
var box = $(".box");
//var boxWidth = box[0].offsetWidth;
//console.log(boxWidth);
var boxWidth = box.eq(0).width();
//计算一行中可以放置多少张图片
var num = Math.floor($(window).width() / boxWidth);
//为最外层的容器 container 设置宽度
var container = $("#container");
container.width(boxWidth * num);
var boxArr = [];
box.each(function(index, value) {
// index为box中的下标，value是对应下标index的元素对象
// value 与 box.eq(index) 是不一样的
// value 是一个元素对象 含有标签、内容、属性等
// 而 box.eq(index) 是一个jQuery对象
// $(value) 等价于 box.eq(index)
//console.log(index + "--" + value); // 0--[object HTMLDivElement]
//js方式
//var boxHeight = value.offsetHeight;
//jQuery方式
var boxHeight = box.eq(index).height();
if(index<num) {
boxArr[index]=boxHeight;
//console.log(boxHeight);
} else {
//当前boxArr数组盒子中最小的高度
var minBoxHeight = Math.min.apply(null, boxArr);
//console.log(minBoxHeight);
var minBoxIndex = $.inArray(minBoxHeight, boxArr);
//console.log(value);
//console.log(box.eq(index));
$(value).css({
position: "absolute",
top: minBoxHeight,
left: box.eq(minBoxIndex).position().left
});
boxArr[minBoxIndex] += boxHeight;
}
});
}
运行结果如下：
