【简易实用】源生js瀑布流示列

代码片段示列：

<!DOCTYPE html>
<html><head><title>js流布局</title><style>*{margin:0;padding:0;}li{list-style:none;}.list {position: relative;}.list .item{ position: absolute;}.list img{display:block;width:100%;}</style></head><body><div class="warp"><ul class="list" id="list"><li class="item"><img src="./img/1.jpg" />01</li><li class="item"><img src="./img/2.jpg" />02</li><li class="item"><img src="./img/3.jpg" />03</li><li class="item"><img src="./img/4.jpg" />04</li><li class="item"><img src="./img/5.gif" />05</li><li class="item"><img src="./img/6.jpg" />06</li><li class="item"><img src="./img/7.jpg" />07</li><li class="item"><img src="./img/5.gif" />08</li><li class="item"><img src="./img/6.jpg" />09</li><li class="item"><img src="./img/7.jpg" />10</li></ul></div></body>
</html>
<script>function flowObj () {this.ImgList = document.querySelector('#list');this.itemList = document.getElementsByClassName('item');}flowObj.prototype.setCol = function () {// 获取屏幕总宽度var totalWidth = document.clientWidth || document.body.clientWidth;// 计算item宽度var itemWidth = '';// 每行多少张var colImg = '';switch (true) {case totalWidth <= 808:// 显示三张itemWidth = Math.ceil(totalWidth / (colImg = 3));break;case totalWidth > 808 && totalWidth <= 1242:// 显示五张itemWidth = Math.ceil(totalWidth / (colImg = 5));break;case totalWidth > 1242:// 显示七张itemWidth = Math.ceil(totalWidth / (colImg = 7));break;default:break;}// 存高度数组var harr = new Array(colImg+1).join('0').split('');for ( var i = 0; i < this.itemList.length; i++) {var mins = Math.min.apply(null,harr);var bol = true;this.itemList[i].style.width = itemWidth + "px";for (var j = 0; j < harr.length; j++) {// 若有相同高度的最小高度if (harr[j] == mins && bol) {bol = false;// 设置 topthis.itemList[i].style.top = harr[j]+"px";// 设置leftthis.itemList[i].style.left = j * itemWidth + "px";// 赋值heightharr[j] = parseFloat(harr[j]) + this.itemList[i].clientHeight;}}}}var flow = new flowObj();window.onload = function () {flow.setCol();}window.onresize = function () {flow.setCol();}
</script>

1.没有做封装，简单版本

代码片段说明：

建立两个数组

如：harr --> 保存列的高度值，每个值初始化为0，避免下面循环时做为空等判断。

这个列可根据多少屏幕宽度自己自定义吧。

每列展示多少个即可算出每个li.item的宽度，并赋值。

如：this.itemList ---> 展示的li，这个是操作li的

循环itemList 目的->赋值操作每个列的 left ， top 。

left，top从哪里来 --> harr中来。第二行的第一张图要放在第一行的最小那一列的下方，所以此处要先找harr中的最小高度值，会得到它的索引。left = j * 它的宽度 ,top = harr[j]

每一次循环的找到的最小高度值，要进行‘更新’，需要重新赋予新的高度值（也就是插入进瀑布流图片的高度值）。

总结：

每一张图片要进行三个操作：

① 取最小高度值（图片要放的哪一张图下面）

② 设置left,top值（根据第一步得到的）

③ 赋值（更新 harr[],插入的那张图片的高度）

2.有几个需要注意的地方：

① this.itemList[i].style.width = itemWidth + "px";

设置每个li.item的宽度，请在之前就设置好，不然下面获取的clientHeight 不准确（因为宽高度是img跟里面的内容撑开的，img的宽度是100% ，会等比缩放的。）

② var bol = true;

harr[] 这个数组，用来保存li.item的高度值的，好找最小高度值，考虑到最小高度值可能有一样的，那么取第一个就好，也就是说，找到了直接false即可。

【简易实用】源生js瀑布流示列相关推荐

原生js瀑布流效果，css+html+js，复制下来可直接使用
html里面总共需要引入三个文件 css文件两个,js代码一个 :::json文件里面的图片就自己增改把 html页面 <div class="container" id=& ...
前端纯源生js 数字流（全代码）
纯源生js代码书写数字流 <!DOCTYPE html> <html lang="zh"><head><meta charset=&qu ...
原声JS瀑布流加延迟加载
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
原声JS瀑布流加延迟载入
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
JS——瀑布流无限加载以及动态生成a标签
如何实现瀑布流排列效果?看下面这张图通过js去比较每张图片的高度,然后进行排列. 这是一个模拟的瀑布流的list列表项 <div id="main"><div ...
iOS开发之窥探UICollectionViewController(四) --一款功能强大的自定义瀑布流
在上一篇博客中<iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流>,自定义瀑布流的列数,Cell的外边距,C ...
网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
堆糖瀑布流完整解决方案(jQuery)
2010年堆糖创办以来,网站界面经历过3-5次重大改版,logo也曾更换过两次,早期蓝红相间三个圈的logo恐怕很少有人记得了.与此同时,前端 js 框架也在默默的更新换代.最早堆糖上线时,js 采用 ...
瀑布流插件vue-masonry
前言之前其实有分享过一篇纯CSS实现瀑布流的方法: https://oliver.blog.csdn.net/article/details/126450691,但纯CSS实现的方案都不是比较好的方 ...

【简易实用】源生js瀑布流示列

【简易实用】源生js瀑布流示列相关推荐

最新文章

热门文章