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 {width:190px;height:auto;}

JS代码：

 1 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" } ] };
 2 $(document).ready(function () {
 3 $(window).on("load", function () {
 4 imaglocation();
 5 window.onscroll = function () {
 6 if (scrollside()){
 7 $.each(ImageDat.data, function (index, value) {
 8 var box = $("<div>").addClass("box").appendTo("#continars");
 9 var content = $("<div>").addClass("content").appendTo(box);
10 $("<img>").attr("src", "./image/" + $(value).attr("src")).appendTo(content);
11 });
12 imaglocation();
13 }
14 };
15 });
16 });
17 function scrollside() {
18 var box = $(".box");
19 var lastboxheight = box.last().get(0).offsetTop + Math.floor(box.last().height() / 2);//当滚动条滚动到最下面张图片的一般位置的时候
20 var documentheight = window.screen.availHeight;//当前浏览器可见页面高度
21 var scrollTop = $(window).scrollTop();//可见页面顶部到页面顶部的距离
22 return (lastboxheight < (documentheight + scrollTop)) ? true : false;
23 }
24 function imaglocation() {
25 var box = $(".box");
26 var boxwidth = box.eq(0).width();//第一张图片的宽度
27 var num = Math.floor($(window).width() / boxwidth);
28 var boxArr = [];
29 box.each(function (index, value) {
30 var boxheight = box.eq(index).height();
31 if (index < num) {
32 boxArr[index] = boxheight;
33 }
34 else {
35 var minboxheight = Math.min.apply(null, boxArr);
36 var minboxindex = $.inArray(minboxheight, boxArr);//判断高度最低的图的位置
37 $(value).css({
38 "position": "absolute",
39 "top": minboxheight,
40 "left": box.eq(minboxindex).position().left
41 });
42 boxArr[minboxindex] += box.eq(index).height();//将最新加入图片高度加到列高度计算中
43 }
44 });
45 }
46
47  

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