瀑布流又称瀑布流式布局，即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。
index.html
<!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>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.container{
width: 850px;
margin: 20px auto;
display: flex;
align-items: flex-start;
/* 此属性默认值在item不设置高度或设为auto时，默认充满整个容器的高度 */
}
ul{
width: 24%;
margin: 0 0.5%;
list-style: none;
}
ul li{
width: 100%;
margin-top: 20px;
}
ul li img{
display: block;
width: 100%;
height: 300px;
background: url('./images/timg.gif') no-repeat center;
background-size: 60px 60px;
}
ul li p{
text-align: center;
color: rebeccapurple;
text-shadow: 5px 5px 5px rgba(228, 40, 143, 0.3);
}
#back {
width: 100px;
height: 100px;
border-radius: 50%;
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(247, 204, 248, 0.5);
text-align: center;
line-height: 100px;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div class="container" id="container">
<ul>
<!-- <li>
<img alt="">
<p>遇见你真好</p>
</li> -->
</ul>
<ul>
<!-- <li>
<img src="./images/1.jpg" alt="">
<p>遇见你真好</p>
</li> -->
</ul>
<ul>
</ul>
<ul>
</ul>
<ul>
</ul>
<!--回到顶部-->
<div id="back">goBack</div>
</div>
<script src="./utils.js"></script>
<script src="./index.js"></script>
</body>
</html>
index.js
//1.获取需要操作的元素
let uls = document.getElementsByTagName("ul");//获取页面中所有的`ul`（此时获得的是类数组，为了使用数组的sort方法，需将其转换为数组）
uls = Array.from(uls);//类数组转数组，现在的元素集合已经不是原生获取的集合了，所以也没有映射功能了
let page = 1;
let imgs = document.getElementsByClassName("bg");//获取页面中所有的图片，此时页面中还没有图片（数据请求过来后才绑定到页面），不过使用getElementsByClassName()获取有映射关系，可以动态同步变动信息
// let imgs = document.querySelectorAll('.bg')//document.querySelectorAll获取的元素没有映射功能
let data = null;//新建变量存储请求过来的数据
//2.请求数据
function getData(num) {
let xhr = new XMLHttpRequest;
xhr.open("get", "./data.txt?page=" + num, false);//同步ajax
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)) {
data = JSON.parse(xhr.responseText);
}
};
xhr.send();
renderHtml(data);
}
getData(page);
//3.渲染数据到页面
function renderHtml(data) {
for (let i = 0; i < 20; i++) {
let index = Math.round(Math.random() * (data.length-1));//随机产生0~data.length-1之间的整数，用于在data中随机取出图片信息
let curImg = data[index];//从data中随机获取一张图片的信息
let li = document.createElement("li");
let img = document.createElement("img");
let p = document.createElement("p");
img.setAttribute('true-img', curImg.src);//把图片的真实路径放到img元素的行间
img.className = 'bg';//给img添加一个bg类名，用于动态变更有映射关系的imgs
img.style.height = Math.round(Math.random() * (250 - 180) + 180) + 'px';//给img一个随机高度，方便ul的排序（使得每次将li追加到ul[0]中后，下一个ul[0]都是最短的一个ul）
p.innerText = curImg.title;
li.appendChild(img);
li.appendChild(p);
uls.sort((a, b) => {
return a.scrollHeight - b.scrollHeight;
});
uls[0].appendChild(li);
}
}
//4.图片延迟加载（当前看不见的图片，即不在浏览器可视区域中的图片暂时先不加载）
function delay() {
for (let i = 0; i < imgs.length; i++) {
delayImg(imgs[i]);
}
}
// 对每一张图片进行是否显示的逻辑判断
function delayImg(img) {
let winH = utils.win('clientHeight');//浏览器当前可视区域的高度
let winT = utils.win('scrollTop');//浏览器滚动条当前的卷曲高度
let imgH = img.offsetHeight;//图片的高度
let imgT = utils.offset(img).top;//图片距离body的上偏移量
//如果浏览器可视区域的底部与图片的底部重合（浏览器当前可视区域的高度+浏览器滚动条当前的卷曲高度=图片的高度+图片距离body的上偏移量），说明此时图片完全出现在用户视野中，此时开始加载图片
if (winH + winT >= imgH + imgT) {
let trueSrc = img.getAttribute('true-img');//拿到之前存储在img行间的图片真实路径
let newImg = new Image;//新创建一个img元素用于测试拿到的图片真实路径是否正确
newImg.src = trueSrc;
//onload函数执行说明拿到的图片真实路径有效，此时我们可以将真实路径给到img，让其加载
newImg.onload = function () {
img.src = trueSrc;
img.className = '';//去除img的bg类名，使已经加载的图片不再存在于imgs中（避免已加载图片多次重复加载）
}
}
}
delay();//刚进入页面就加载一次图片
//5.是否继续分页请求（当前图片渲染完成后是否继续请求数据加载图片）
// 判断当前数据是否需要继续加载
function isLoad() {
// 去判断当前图片是否继续分页请求
// 当浏览器滚动条卷曲的高度+浏览器可视区域的高度 >= body的真实的高度的时候，说明滚动条已经到底了
let winH = utils.win('clientHeight');
let winT = utils.win('scrollTop');
let bodyH = utils.win('scrollHeight');//body的真实的高度
//当滚动条即将要到达底部之后，马上发送请求去拿到下一页的数据
if (winH + winT + 100 >= bodyH) {
getData()
}
}
//回到顶部
back.onclick = function(){
// 假设移动距离是100
// 把100分成50份
// 让定时器每运行一次就走50份之一，每运行一次需要20ms
let distance = utils.win('scrollTop');
let step = distance/50;
let timer = setInterval(()=>{
distance-=step;
utils.win('scrollTop',distance);
if(distance<=0){
clearInterval(timer)
}
},20)
}
//当浏览器滚动条卷曲高度超过一屏才显示回到顶部按钮
function isButtonShow(){
let winH = utils.win('clientHeight');
let winT = utils.win('scrollTop');
if(winT>=winH){
utils.css(back,'display','block')
}
else {
utils.css(back,'display','none')
}
}
//滚动条一滚动就触发此函数
window.onscroll = function () {
delay();
isLoad();
isButtonShow()
}
utils.js
let utils = (function () {
//获取当前元素距离body的偏移量
function offset(curEle) {
let l = curEle.offsetLeft;
let t = curEle.offsetTop;
let parent = curEle.offsetParent;
while (parent !== document.body) {
l += parent.clientLeft + parent.offsetLeft;
t += parent.clientTop + parent.offsetTop;
parent = parent.offsetParent;
}
return {
left: l,
top: t
}
}
//一些获取/设置css的方法
function getCss(curEle, attr) {
let val = null;
if ('getComputedStyle' in window) {
val = getComputedStyle(curEle)[attr];
} else {
val = curEle.currentStyle[attr];
}
let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize|opacity)$/;
if (reg.test(attr)) {
val = parseFloat(val);
}
return val;
}
function setCss(curEle, attr, value) {
let reg = /^(width|height|padding|margin|left|right|top|bottom|fontSize)$/;
if (reg.test(attr)) {
if (typeof value === 'number') {
value = value + 'px';
}
}
curEle.style[attr] = value;
}
function setGroupCss(curEle, obj) {
// 对象有几个键值对就调用几次setCss方法，
for (var key in obj) {
setCss(curEle, key, obj[key])
}
}
function css(){
let [curEle,attr,value] = arguments;
// 如果传参的个数是2，那就说明不是获取样式就是批量设置样式
if(arguments.length === 2){
// 如果第二个参的数据类型是字符串，那就是获取样式
if(typeof attr === 'string'){
// 如果第二个参数是字符串，说明是获取样式
return getCss(curEle,attr)
}
else {
setGroupCss(curEle,attr)
}
}
// 如果传递的参数是3个，那就是单个设置样式
else if(arguments.length === 3){
setCss(curEle,attr,value)
}
}
//获取/设置浏览器一屏高/宽
function win(attr,value){
if(value === undefined){
return document.documentElement[attr] || document.body[attr]
}
document.documentElement[attr] = value;
document.body[attr] = value;
}
return {
offset,
getCss,
setCss,
setGroupCss,
css,
win
}
})()
data.txt
[
{"src": "./img/1.jpg","title":"人生不止有代码 诗和远方","height": "200px"},
{"src": "./img/2.jpg","title":"人生不止有代码 诗和远方","height": "220px"},
{"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "250px"},
{"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "300px"},
{"src": "./img/5.jpg","title":"人生不止有代码 诗和远方","height": "170px"},
{"src": "./img/6.jpg","title":"人生不止有代码 诗和远方","height": "280px"},
{"src": "./img/7.jpg","title":"人生不止有代码 诗和远方","height": "160px"},
{"src": "./img/8.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
{"src": "./img/3.jpg","title":"人生不止有代码 诗和远方","height": "230px"},
{"src": "./img/4.jpg","title":"人生不止有代码 诗和远方","height": "230px"}
]
2270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
