思路分析
瀑布流布局的特点是等宽不等高(等高不等宽) 分两种
从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
实现的方法有多种 定位 浮动 弹性盒 排序 ...
获取类数组转数组
代码演示
<!DOCTYPE html>
<html lang="zh">
<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>排序瀑布流</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 1050px;
height: auto;
overflow: hidden;
background-color: orange;
margin: 0 auto;
}
.box_a{
width: 200px;
float: left;
height: auto;
margin: 0 5px;
}
.item{
/*子集 每一个小块儿*/
margin: 5px 0;
border-radius: 8px;
width: 100%;
}
img {
width: 100%;
height: 80px;
vertical-align: middle;
}
.title{
}
</style>
</head>
<body>
<div class="box">
<div class="box_a"></div>
<div class="box_a"></div>
<div class="box_a"></div>
<div class="box_a"></div>
<div class="box_a"></div>
<!-- 可以在这里通过控制 css 和 html来改变行和列的个数 -->
<!-- 当然现在这个是没有数据效果的 -->
<!--<div class="box_a">
<div></div>
<div></div>
<div></div>
</div>-->
</div>
</body>
</html>
<!-- <script src="js/data.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
// 思路分析
// 瀑布流布局的特点是等宽不等高(等高不等宽) 分两种
// 从第二行开始，需要将图片放在第一行最矮的图片下面，以此类推。
// 实现的方法有多种 定位 浮动 弹性盒 排序 ...
//获取类数组转数组
let boxs = document.querySelectorAll('.box_a');
let arr = [...boxs]
laoding() //调用函数 默认走40个
function laoding(){
for(let i=0; i<40; i++){
// console.log(arr)
let oDiv = document.createElement('div');
oDiv.style.height = mathHeight()
oDiv.style.backgroundColor = mathColor()
oDiv.className = 'item'
//解析数据 obj
// oDiv.innerHTML = `
// <div><img src="${obj[i].img}" alt="" /></div>
// <div>${obj[i].title}</div>
// <div>${obj[i].money}</div>
// `
//排序
let narr = arr.sort(function(a, b){
return a.offsetHeight - b.offsetHeight
//对比是的当前项的 高度
//升序 排序第0个为最短的 进行插入
})
// console.log(narr[0])
narr[0].appendChild(oDiv)
}
}
//随机色
function mathColor(){
return "rgba(" + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + "," + parseInt(Math.random() * 255) + ",1)";
}
//随机高
function mathHeight(){
var h = Math.round(Math.random()*(300-150)+150)
return h +'px'
}
//滚动加载 ...
//当然这里还有拓展功能 比如点击按钮/移入 加载调用这个函数即可
onscroll = function(){
let oSll = document.documentElement.scrollTop //可视区的高度
let hei = innerHeight
let offhei = document.body.offsetHeight //页面高度
console.log(oSll, hei) //
if(oSll+hei >= offhei-200){ //页面滚动值+页面高度>=窗口的高度 -200 加载数据
laoding() //调取函数 再次走数据
}
}
</script>
效果图所示
仅供参考 不喜勿喷 hahahh~~
