效果如图：
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();
}
})
}
})
时间： 2024-10-28 11:50:04