JS-瀑布流

2018-07-09 分类：JavaScript 作者：管理员阅读（758）

概要：很多电商网站都有瀑布流的应用，早期在蘑菇街看到瀑布流的应用，每个图片宽度一样，不一样的是高度，滚动条滚动到一定位置就会加载图片

<html>
<head>
<meta charset="utf-8" />
<title>简易瀑布流</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
list-style: none;
}

#list {
width: 1110px;
margin: 0 auto;
}

#list li {
width: 212px;
float: left;
padding: 5px;
}

.div {
border: 1px solid #333;
padding: 5px;
margin-bottom: 10px;
}

.img {
width: 200px;
display: block;
}

.clearfix::after {
content: "";
display: block;
clear: both;
}
</style>
<script type="text/javascript">
window.onload = function () {

/*实现：5个li分成5列，通过判断当前哪一个li高度最小，然后把div插入到那个li里面*/
//获取ul元素
var oList = document.getElementById('list');
//获取ul里的li元素
var aLi = oList.getElementsByTagName('li');
//标记flag 用来控制滚动触发函数
var flag = true;
//json数据
var json = {
'data': [{
'src': 'http://s11.mogucdn.com/mlcdn/55cf19/180606_71eba4fi6d28dcdfe8c5cbga82i9j_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180524_2i8b422ac3kj01ib90ja7i18kjh88_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/55cf19/180630_4eg021di6l8e0087c6ie0d0k1die1_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180408_12ak0afkihihb401d6gaiilhblkb2_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180510_2hehj25hbkibf6617122h948jc80c_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/p1/160719/36434224_ifqwcojqgi4wgolehezdambqgyyde_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180324_6hb292f3ik9cad2aka6j0e75lbl8e_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180507_7kfbhf7fk49eg9agle3j7ddklkh9k_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180709_6cfh4f8e8c8l9756f8306jf1la2l4_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180424_883kc5c5gfj1f611hh69fj01e91j4_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180423_72h6cjf0li1if4kg89706083d4jl9_800x1200.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180313_6icf64185a0f6fel9glc3bdki4699_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180509_6dffclbehblh5h9b0k8geik1ejjl6_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180406_1b0hb0llechgkbh3017j2dd2c88jc_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180327_57lj209b86e4d870f5k316j68bc8l_800x1200.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180414_4gg153j361cl5i288156lh7jbai19_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180630_29e1877b1f3e4l26l4e32bi85j06d_640x960.jpg_240x320.v1cAC.webp'
},
{
'src': 'http://s11.mogucdn.com/mlcdn/c45406/180705_4gc67cajk6hib80kj67d6akh2ifga_640x936.jpg_240x320.v1cAC.webp'
},
],
'imgH': [{
'height': '232px'
}, {
'height': '264px'
}, {
'height': '300px'
},
{
'height': '289px'
}, {
'height': '267px'
}, {
'height': '278px'
},
{
'height': '300px'
}, {
'height': '234px'
}, {
'height': '271px'
},
{
'height': '251px'
}, {
'height': '363px'
}, {
'height': '333px'
},
{
'height': '333px'
}, {
'height': '320px'
}, {
'height': '300px'
},
{
'height': '333px'
}, {
'height': '320px'
}, {
'height': '300px'
},
{
'height': '333px'
}, {
'height': '320px'
},
]
}
getLoad();
//加载数据方法
function getLoad() {
for (var i = 0; i < json.data.length; i++) {
var min = myMin();
var oDiv = document.createElement('div');
oDiv.className = 'div';
var oImg = document.createElement('img');
oImg.className = 'img';
oImg.src = json.data[i].src;
/*这里必须要设置高度，测试中发现js会把每一个节点、属性
创建好，然后再加载入图片，不设置一开始就不能比较li的高度*/
oImg.style.height = json.imgH[i].height;
oDiv.appendChild(oImg);
//高度最小的li插入div
aLi[min].appendChild(oDiv);
}
flag = true;
}
//获取到当前li高度最小的索引
function myMin() {
var index = 0;
var min = aLi[index].offsetHeight;
for (var i = 1; i < aLi.length; i++) {
if (aLi[i].offsetHeight < min) {
index = i;
min = aLi[index].offsetHeight;
}
}
return index;
}
//监听滚动
window.onscroll = function () {
//要获取当前页面的滚动条纵坐标位置
var scroT = document.documentElement.scrollTop || document.body.scrollTop;
//获取页面可视区的高度
var clieH = document.documentElement.clientHeight || document.body.clientHeight;
//获取到当前li高度最小的索引
var minN = myMin();
//这里判断加载是刚出现空白就加载，也就是滚动到了高度最小那一列完了
if ((aLi[minN].offsetTop + aLi[minN].offsetHeight) < (scroT + clieH)) {
if (flag) {
flag = false;
getLoad();
}
}
};
};
</script>
</head>

<body>
<ul id="list" class="clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>

</html>

总结：
在Html页面中创建ul，再在ul创建5个li，5个li分成5列，
通过滚动条监听事件，判断当前哪一个li高度最小，
然后把div插入到那个li里面

「三年博客，如果觉得我的文章对您有用，请帮助本站成长」

赞(0) 打赏