<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript瀑布流</title>
<!-- 样式部分 -->
<style>
* {
margin: 0;
padding: 0;
position: relative;
}
img {
width: 220px;
display: block;
}
.item {
box-shadow: 2px 2px 2px #999;
position: absolute;
}
#box {
margin: 10px auto 10px auto;
}
</style>
</head>
<body>
<!-- html 部分 -->
<div id="box">
<div class="item">
<img src="./images/0.jpg" alt="">
</div>
<div class="item">
<img src="./images/1.jpg" alt="">
</div>
<div class="item">
<img src="./images/2.jpg" alt="">
</div>
<div class="item">
<img src="./images/3.jpg" alt="">
</div>
<div class="item">
<img src="./images/4.jpg" alt="">
</div>
<div class="item">
<img src="./images/5.jpg" alt="">
</div>
<div class="item">
<img src="./images/6.jpg" alt="">
</div>
<div class="item">
<img src="./images/7.jpg" alt="">
</div>
<div class="item">
<img src="./images/8.jpg" alt="">
</div>
<div class="item">
<img src="./images/9.jpg" alt="">
</div>
<div class="item">
<img src="./images/10.jpg" alt="">
</div>
<div class="item">
<img src="./images/11.jpg" alt="">
</div>
<div class="item">
<img src="./images/12.jpg" alt="">
</div>
<div class="item">
<img src="./images/13.jpg" alt="">
</div>
<div class="item">
<img src="./images/14.jpg" alt="">
</div>
<div class="item">
<img src="./images/15.jpg" alt="">
</div>
<div class="item">
<img src="./images/16.jpg" alt="">
</div>
<div class="item">
<img src="./images/17.jpg" alt="">
</div>
<div class="item">
<img src="./images/18.jpg" alt="">
</div>
<div class="item">
<img src="./images/19.jpg" alt="">
</div>
<div class="item">
<img src="./images/20.jpg" alt="">
</div>
</div>
<!-- js 部分 -->
<script src="./mock-min.js"></script>
<!-- <script src="./server.js"></script> -->
<script src="./jquery-1.12.2.min.js"></script>
<script>
Mock.mock(/server/, 'get', function () {
let arr = [];
// 通过for循环返回30张图片
for (let i = 0; i < 30; i++) {
let randomNum = Math.floor(Math.random() * 98); // 图片一共98张
let str = `./images/${randomNum}.jpg`; // 组成相应的字符串
arr.push(str);
}
return arr;
});
let gap = 10;
$(document).ready(function () {
waterFall();
function waterFall() {
// 获取元素
let items = $(".item");
let pageWidth = $(window).width()//获取页面宽度
let itemWidth = $(".item").eq(0).innerWidth()
// console.log(itemWidth)
let columns = parseInt($(window).width() / ($(".item:first").width() + gap));
// console.log(`woshi${columns}`)
$("#box").css({
"width": columns * ($(".item:first").width() + gap),
});
// console.log(`woshi${$("#box").css("width")}`)
let arr = [];
for (let i = 0; i < items.length; i++) {
// 第一行
if (i < columns) {
items.eq(i).css({
"top": 0,
"left": (itemWidth + gap) * i,
});
arr.push(items.eq(i).height());
} else {
// 不是第一行
let minHeight = Math.min(...arr);
let index = 0;
for (let j = 0; j < arr.length; j++) {
if (minHeight === arr[j]) {
index = j;
}
}
items.eq(i).css({
"left": $(".item").eq(index).offset().left - $("#box").offset().left,
"top": arr[index] + gap
});
arr[index] = arr[index] + items.eq(i).height() + gap;
// console.log(arr[index])
}
}
}
// 生成新数据
$(window).scroll(function () {
// console.log($(window).innerHeight())
if ($(window).height() + $(window).scrollTop() >= $(".item:last").offset().top) {
// alert(123)
$.ajax({
url: './server.js',
type: 'get',
success: function (data) {
// 在回调函数里面进行数据的处理
data = JSON.parse(data);
for (let i = 0; i < data.length; i++) {
$(` <div class="item">
<img src="${data[i]}" alt="">
</div>`).appendTo($("#box"))
}
}
});
}
waterFall();
});
// 监听
$(window).resize(function () {
waterFall();
// alert(123)
})
});
</script>
</body>
</html>
转载于:https://www.cnblogs.com/xiaozhou619/p/9867004.html
相关资源：数据结构—成绩单生成器
