//保证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>
