<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style> * { margin: 0px; padding: 0px; } #contianer { position: relative; font-size: 0; margin: 0 auto; } .box { padding: 5px; float: left; box-sizing: border-box; } .boximg { padding: 5px; box-shadow: 0 0 5px #ccc; border: 1px solid #cccccc; border-radius: 5px; } .boximg img { width: 250px; height: auto; position: relative; } #mask{ width: 250px; height: auto; background: red; position: absolute; z-index: 1; } #mask:hover{ background: salmon; z-index: 2; } </style>
这是css代码,具体结构视情况而定
然后是body布局
<div id="container"> <div class="box"> <div class="boximg"> <img src="img/1.jpg"> <div id="mask"></div> </div> </div> <div class="box"> <div class="boximg"> <img src="img/2.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/3.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/4.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/5.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/6.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/7.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/8.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/9.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/10.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/11.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/12.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/13.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/14o.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/15.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/2.jpg"> </div> </div> <div class="box"> <div class="boximg"> <img src="img/3.jpg"> </div> </div> </div>
图片引入多少看自己
然后引入jquery-1.8.3.js，(这里其他js文件可不可以我没试过)
最后js代码:
思路如下:
<script>
//思路如下：
$(function() {
var imgWidth = $(".box").innerWidth(); //获得每个div的宽度，包括内边距
var screenWidth = $(window).width(); //获得浏览器可视区域的宽度
var num = Math.floor(screenWidth / imgWidth); //计算一行可以放几个div
$("#container").css({
"width": num * imgWidth + "px",
"margin": "0 auto"
}); //根据每行放的div的总长来给容器一个宽度，然后居中显示
function waterFlow() {
var arr = []; //定义一个数组
for(var i = 0; i < $(".box").length; i++) {
if(i < num) { //一行显示num个div,将第一行的每个div高度写入数组
arr[i] = $(".box").eq(i).innerHeight();
} else {
var minImgHeight = Math.min.apply(null, arr); //取得数组中最小高度的div
var index = getMinIndex(arr, minImgHeight); //取得数组中最小高度的div的索引
$(".box").eq(i).css({
"position": "absolute",
"top": minImgHeight + "px",
"left": $(".box").eq(index).offset().left + "px"
}); //瀑布流布局
arr[index] += $(".box").eq(i).innerHeight(); //将布局好的该div的高度和该div上面的div高度相加，重新放入数组
}
}
}
function getMinIndex(arr, min) { //取得数组中最小高度的div的索引
for(var i in arr) {
if(arr[i] == min) {
return i;
}
}
}
function checkScrollDirector() { //判断滚动条是否滑到底部
var flag = 0;
if($(document).scrollTop() + $(window).height() >= $(document).height()) {
flag = 1;
}
return flag;
}
console.log($(document).height())
console.log($(window).height())
window.onload = function() {
waterFlow(); //图片加载完毕执行
var json = {
"data": [{
"src": "img/1.jpg"
}, {
"src": "img/2.jpg"
}, {
"src": "img/3.jpg"
}, {
"src": "img/4.jpg"
}, {
"src": "img/5.jpg"
},
{
"src": "img/6.jpg"
}, {
"src": "img/7.jpg"
}, {
"src": "img/8.jpg"
}, {
"src": "img/9.jpg"
}, {
"src": "img/10.jpg"
},
{
"src": "img/11.jpg"
}, {
"src": "img/12.jpg"
}
]
};
window.onscroll = function() { //滚动条滚动执行
if(checkScrollDirector()) {
for(var i = 0; i < json.data.length; i++) {
var html = "<div class=‘box‘><div class=‘boximg‘><img src=" + json.data[i].src + "></div></div>";
$("#container").append(html); //向容器内一次性添加12个图片
console.log(1);
}
waterFlow(); //瀑布流布局
}
}
}
})
</script>
希望你们能用到
原文：http://www.cnblogs.com/Mousika/p/7219852.html