//保证img文件夹下有图片
//引入jquery
<script src="Script/jquery-1.7.2.js"></script> <style>
* {
padding: 0;
margin: 0;
} #main {
position: relative;
} .pin {
padding: 10px 0 0 10px;
float: left;
} .box {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
height:90%;
} .box img {
width: 162px;
height: auto;
}
</style>
<body>
<form id="form1" runat="server">
<div id="main">
<div class="pin">
<div class="box">
<img src="img/1.jpg" />
</div>
</div> <div class="pin">
<div class="box">
<img src="img/2.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/3.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/4.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/5.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/6.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/7.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="img/8.jpg" />
</div>
</div>
</div>
</form>
</body>
////////////js
<script>
window.onload = function () {
waterfall();//加载时成瀑布流效果
var imgss = { "data": [{ "src": "img/1.jpg" }, { "src": "img/2.jpg" }, { "src": "img/3.jpg" }, { "src": "img/4.jpg" }, { "src": "img/5.jpg" }, ] };
$(window).on("scroll", function () {
if (fun_scroll()) {
for (var i = 0; i < imgss.data.length; i++) {
var div_pin = $("<div>").addClass("pin");
var div_box = $("<div>").addClass("box");
div_box.appendTo(div_pin);
var img = $("<img>").attr("src", imgss.data[i].src);
img.appendTo(div_box);
div_pin.appendTo($("#main"));
waterfall();
}
}
});
} //设置瀑布流
function waterfall() {
////获取单个宽度
/////////////$(".pin").width();//只获取元素的真实宽度
/////////////document.getElementById("id")offsetWidth;//获取元素加上外间距的宽度
var objWidth = $(".pin:eq(0)").get(0).offsetWidth;//.width();
////获取每行个数document.documentElement.clientWidth
var num = Math.floor($(document).width() / objWidth);
$("#main").css({ "width": (objWidth * num) + "px", "margin": "0 auto" });
var heigs = [];
$(".pin").each(function (i, obj) {
if (i < num) {
heigs.push($(obj).get(0).offsetHeight);
} else {
//获取最小的值
var mixh = Math.min.apply(null, heigs);
//获取值的索引
var inx = $.inArray(mixh, heigs, null);
$(obj).css({
"position": "absolute",
"top": mixh,
"left": $(".pin").eq(inx).position().left,
});
heigs[inx] += $(obj).get(0).offsetHeight;
}
});
} //滚动，滚动条时动态加载图片
var fun_scroll = function () {
//最后一个元素距离顶部的高度+自身一半高度
var lastObjHeight = Math.floor($(".pin").last().offset().top) + Math.floor($(".pin").last().height() / 2);
//卷进去的高度
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
//屏幕的高度
var deviceheight = document.documentElement.clientHeight;
return ((deviceheight + scrollHeight) > lastObjHeight) ? true : false;
}
</script>
