js 之瀑布流

页面：

<div id="continars">
</div>

CSS：

* {margin:0;padding:0;}
.box {position:relative;float:left;}
.content {padding:10px;border:1px solid #ccc;box-shadow:0 0 5px #ccc;border-radius:5px;}
.content img {190px;height:auto;}

JS代码：

var ImageDat = { "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" }, { "src": "10.jpg" } ] };
$(document).ready(function () {
$(window).on("load", function () {
imaglocation();
window.onscroll = function () {
if (scrollside()){
$.each(ImageDat.data, function (index, value) {
var box = $("<div>").addClass("box").appendTo("#continars");
var content = $("<div>").addClass("content").appendTo(box);
$("<img>").attr("src", "./image/" + $(value).attr("src")).appendTo(content);
});
imaglocation();
}
};
});
});
function scrollside() {
var box = $(".box");
var lastboxheight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2);//当滚动条滚动到最下面张图片的一般位置的时候
var documentheight = window.screen.availHeight;//当前浏览器可见页面高度
var scrollTop = $(window).scrollTop();//可见页面顶部到页面顶部的距离
return (lastboxheight < (documentheight + scrollTop)) ? true : false;
}
function imaglocation() {
var box = $(".box");
var boxwidth = box.eq(0).width();//第一张图片的宽度
var num = Math.floor($(window).width() / boxwidth);
var boxArr = [];
box.each(function (index, value) {
var boxheight = box.eq(index).height();
if (index < num) {
boxArr[index] = boxheight;
}
else {
var minboxheight = Math.min.apply(null, boxArr);
var minboxindex = $.inArray(minboxheight, boxArr);//判断高度最低的图的位置
$(value).css({
"position": "absolute",
"top": minboxheight,
"left": box.eq(minboxindex).position().left
});
boxArr[minboxindex] += box.eq(index).height();//将最新加入图片高度加到列高度计算中
}
});
}

 

其中：1-10的图片可以随机选择放入