标签：
页面：
<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的图片可以随机选择放入
标签：
原文地址：http://www.cnblogs.com/XiangszRN/p/4786751.html
