<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
}
html, body {
background-color: #535353;
}
.block {
position: relative;
width: 840px;
margin: 0 auto;
border: 1px solid white;
}
.bchild {
position: absolute;
float: left;
width: 200px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px silver;
margin: 0 5px;
}
.imglist {
width: 180px;
margin: 10px 10px;
}
</style>
</head>
<body>
<div class="block">
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
var list = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", "11.jpg", "12.jpg", "13.jpg", "14.jpg", "15.jpg"];
showImage(list);
$(document).bind("scroll", function () {
if ($(window).height() + $(this).scrollTop() >= $(document).height() - 20) {
var newlist = [list[Math.floor(Math.random() * list.length)], list[Math.floor(Math.random() * list.length)], list[Math.floor(Math.random() * list.length)], list[Math.floor(Math.random() * list.length)]];
showImage(newlist);
}
});
function showImage(obj) {
//创建元素的
obj.forEach(function (res, index) {
var bo = $("<div class='bchild'></div>");
var img = $("<img class='imglist'>");
img.attr("src", "./img/" + res);
bo.append(img);
$(".block").append(bo);
});
//遍历了所有 容器
$(".bchild").each(function (index) {
if (index < 4) {
$(".bchild").eq(index).css("top", 10);
}
else {
$(".bchild").eq(index).css({
"top": $(".bchild").eq(index - 4)[0].offsetHeight + $(".bchild").eq(index - 4)[0].offsetTop + 10
});
}
$(".bchild").eq(index).css("left", index % 4 * 210);
});
$(".block").css("height", $(document).height());
}
</script>
</body>
</html>
459
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
