效果如图：
html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/image.css"/> <script type="text/javascript" src="js/jquery-2.1.0.js" ></script> <script type="text/javascript" src="js/image.js" ></script> </head> <body> <div class="content"> <div class="box"> <div class="img_box"><img src="img/1.jpg" alt="" /></div> </div> <div class="box"> <div class="img_box"><img src="img/2.jpg" alt="" /></div> </div> <div class="box"> <div class="img_box"><img src="img/3.jpg" alt="" /></div> </div> <div class="box"> <div class="img_box"><img src="img/4.jpg" alt="" /></div> </div> <div class="box"> <div class="img_box"><img src="img/5.jpg" alt="" /></div> </div> <div class="box"> <div class="img_box"><img src="img/6.jpg" alt="" /></div> </div> <div class="box"> <div class="img_box"><img src="img/7.jpg" alt="" /></div> </div> <div class="box"> <div class="img_box"><img src="img/8.jpg" alt="" /></div> </div> </div> </body> </html>
css:
* { padding: 0; margin: 0; } .content { position: relative; } .box { float: left; padding: 12px 0px 0px 10px; } .img_box { padding: 10px; border: solid 1px black; border-radius: 10px; box-shadow: 5px 5px 5px 2px darkgray; } .img_box:hover { margin: 12px; box-shadow: 3px 3px 3px 3px darkgray; } img { width: 400px; } .toast { position: fixed; width: 170px; height: 50px; text-align: center; line-height: 50px; box-shadow: 5px 5px 5px 2px darkgray; border-radius: 20px; background: cornflowerblue; top: 600px; left: 600px; color: white; font-weight: bold; font-size: 20px; }
js:
$(document).ready(function() { window.onload = init; //当图片加载完后 window.onscroll = sc; //当滚动进度条时 $(window).resize(init); //当浏览器页面大小改变时 function sc() { //如果屏幕可见高度+滚动高度>=最后一张图片的高度+最后一张图片的一半，那么自动加载 if(($(window).scrollTop() + document.documentElement.clientHeight) >= ($(".box").last().position().top + $(".box").last().outerHeight() / 2)) { //加载更多 for(var i = 1; i < 26; i++) { $(".content").append("<div class="box"><div class="img_box"><img src="img/" + i + ".jpg" /></div></div>"); } $("body").append("<div class="toast">加载中……</div>"); //设置延时自动关闭 setTimeout(function() { $(".toast").hide(200);}, 1000) init(); } } function init() { /** * 瀑布流图片代码分析 * 得到第一行图片个数、最短图片位置 * 个数：总长度/box长度 */ //得到屏幕长度 var clientW = document.body.clientWidth; //得到单个box的长度 var box = $(".box").outerWidth(); //得到一行的个数 var count = parseInt(clientW / box); //把图片在页面中居中 $(".content").css({ marginLeft: (clientW - box * count) / 2 }) var start = 0; var end = start + count; //循环，把个数的高传入数组 var arr = []; $(".box").slice(start, end).each(function() { arr.push($(this).outerHeight()); }) //循环，每次都要改变最短图片的位置 $(".box").each(function(n) { //得到最短的图片及它所出现的位置，从0开始 var minHei = Math.min.apply(null, arr); var posit = $.inArray(minHei, arr); //即将要出现的图片的左边距就是位置*box长度 var width = posit * box; //如果是第一行后面的图片 if(n >= count) { //如果是除第 一行后的后面几张 $(this).css({ "position": "absolute", "left": width, "top": minHei, }); arr[posit] += $(this).outerHeight(); } }) } })