瀑布流的3实现方式

1:js 两列布局实现，思路：左右分为两个容器，根据容器的高度（相对低的那一个）决定下一个元素应该放在哪个容器内，这样视觉就实现了瀑布流的效果，代码如下：

瀑布流容器

<!--瀑布流容器-->
<div id="box"></div>

js代码

//接口获取数据，循环展示function forList(list){var HTML = "";for(var i=0;i<list.length;i++){HTML+='<li class="item" data="'+i+'">' ;HTML+='<div class="box-item">' ;HTML+='<img src="'+list[i].sIMG+'" alt=""><div class="text">'+list[i].sTitle+'</div>';HTML+= '</div>';HTML+= '</li>';}/*** HTML ;拼接后的字符串* #box，存放瀑布流的容器*/// 调用瀑布流函数warterfall(HTML,'#box')}//拉取数据forList(lists1);// 瀑布流函数function warterfall(HTML,content) {//生成左右两个容器及暂时存放元素的容器（hidebox）if($(content+' ul').length<=0){$(content).append('<ul class="left"></ul><ul class="right"></ul><ul id="hidebox" style="display: none;"></ul>');}//数据先放在一个隐藏的容器，$("#hidebox").html(HTML);//取出元素var  items=$("#hidebox li");//获取左右两个容器var leftbox=$(content+' .left');var rightbox=$(content+' .right');//设置延迟，保证图片加载完成，避免影响左右容器高度的计算，导致数据放到错误的位置setTimeout(function () {// 左边容器高度var leftDivHeight = leftbox.height();// 右边容器高度var rightDivHeight =rightbox.height();items.each(function (index,item) {//瀑布流函数,该函数计算左右容器的总高度，决定把下一个元素放在哪个容器里面//获取左右容器高度leftDivHeight = leftbox.height();rightDivHeight =  rightbox.height();//把下一个元素放在高度低的容器里面if(leftDivHeight<=rightDivHeight) {leftbox.append(item);return;}rightbox.append(item);})},500)};

效果如下：

2:js position定位，思路：js记录左右两列的所有元素并计算总高度，决定下一个元素的放置位置（注意：元素与元素之间不能用`margin`,因为这样会影响定位）代码如下：

瀑布流容器

<!--瀑布流容器--><ul id="content" class="force-column  listcom"></ul>

js代码

 function warterfall(parent, box) {//瀑布流函数,该函数将图片定位到上一行高度最小图片下方,接数据,更新dom后,重新执行该函数//将main下的所有class为box的元素取出来var oParent = $('#'+parent);var oBoxs =oParent.find('.'+box);//计算整个页面显示的列数(页面宽/box的宽);var oBoxW = oBoxs.eq(0).width();var cols = 2;var hArr = [];for (var i = 0; i < oBoxs.length; i++) {var currentBox=oBoxs.eq(i);if (i < cols) {// 将前2张图片的宽度记录到hArr数组中(第一行的高度)hArr.push(currentBox.height());} else {//从第二行开始就开始找最小的高度了，决定待插入图片该插入到哪里// 找到高度最小的值var minH = hArr[0]>hArr[1]?hArr[1]:hArr[0];var index = hArr.indexOf(minH);// 设置最小高度的图片的style为绝对定位，并设置top和leftcurrentBox.css({'position':'absolute','top': minH ,'left': oBoxW * index});//高度叠加hArr[index] += currentBox.height();}}};function forList(list){var HTML = "";for(var i=0;i<list.length;i++){HTML+='<li class="item" data="'+i+'">' ;HTML+='<div class="box-item">' ;HTML+='<img src="'+list[i].sIMG+'" alt=""><div class="text">'+list[i].sTitle+'</div>';HTML+= '</div>';HTML+= '</li>';}$("#content").append(HTML);setTimeout(function(){warterfall("content", "item");},3000)}forList(lists1);$(".btn").on('click',function () {forList(lists1)})

效果如下：

完美实现，但是它每次都需要获取全部元素，再重新定位，很耗性能。

3: `css`实现

页面布局：

<div class="box">
<!--瀑布流存放的位置--><ul id="content" class="force-column  listcom"></ul><div class="btn">加载更多</div>
</div>

样式设置

 .box{width: 100%;height: 600px;overflow: scroll;}.box .force-column {width: 100%;position: relative;overflow-x: hidden;/*设置元素分几列显示*/-moz-column-count: 2;-webkit-column-count: 2;column-count: 2;}.box-item{width: 200px;background: yellowgreen;}img{width: 200px;height: auto;}

假如数据是接口返回的

<script>var lists1 = [{"title":"1111","img":"//sy-1254960240.cos.ap-guangzhou.myqcloud.com/smoba/ingame/images/202007/df7cd494edf5292ca388881fdd4cde852.jpg",},{"title":"2222","img":"//shp.qpic.cn/cfwebcap/0/eb2832fbac46ba7182052e7e332230ba/0/?width=330&height=186",},{"title":"3333","img":"//sy-1254960240.cos.ap-guangzhou.myqcloud.com/smoba/ingame/images/202007/df7cd494edf5292ca388881fdd4cde852.jpg",},{"title":"4444","img":"//shp.qpic.cn/cfwebcap/0/615b9a61170c3213965092ea7cc004a6/0/?width=330&height=186",},{"title":"5555","img":"//sy-1254960240.cos.ap-guangzhou.myqcloud.com/smoba/ingame/images/202007/df7cd494edf5292ca388881fdd4cde852.jpg",},{"title":"6666","img":"//shp.qpic.cn/cfwebcap/0/448097ae928f6f4015758aced9e72cc7/0/?width=330&height=186",},{"title":"7777","img":"//shp.qpic.cn/cfwebcap/0/f463c748a8810add5538a76b51aa6f1a/0/?width=330&height=186",},{"title":"8888","img":"//shp.qpic.cn/cfwebcap/0/66585db88507b07fff35e2affa365b37/0/?width=943&height=398",},{"title":"9999","img":"//sy-1254960240.cos.ap-guangzhou.myqcloud.com/smoba/ingame/images/202007/df7cd494edf5292ca388881fdd4cde852.jpg",},]function forList(list){var HTML = "";for(var i=0;i<list.length;i++){HTML+='<li class="item" data="'+i+'">' ;HTML+='<div class="box-item">' ;HTML+='<img src="'+list[i].img+'" alt=""><div class="text">'+list[i].title+'</div>';HTML+= '</div>';HTML+= '</li>';}$("#content").append(HTML)// setTimeout(function(){//     warterfall("content", "item");// },3000)}forList(lists1)$(".btn").on('click',function () {forList(lists1)})
</script>

打开页面写，效果如下：

效果虽然实现了，但是美中不足的是，他有个问题：数据不是按照1-2-3-4，的顺序来排列的，而是左边是1，3，5，右边是2,4,6。对于需要展示的数据对排序有要求的话（比如排行榜），此种方法不合适；如何来解决这个bug,很简单，就是我们需要对数据进行二次处理，把1，3，5数据放在前面，2，4，6f放在后面，这样就可以了，代码如下：

   //数据处理1,3,5,放前面，2，4，6放后面function dataFilter(lists){var leftArr=[];var rightArr=[];$.each(lists,function (index,value) {if(index%2==0) {leftArr.push(value)}else {rightArr.push(value)}})var currentArr= [].concat(leftArr,rightArr);return currentArr}forList(dataFilter(lists))

效果如下：

,此时数据看起来是按照顺序排列的，并且均分放置，也就是两列的列表个数几乎是一样的，但是如果两边的数据因为文字或者图片差异比较大，是否会导致两列高度差异比较大的问题呢？，我们来修改数据看一下，比如增加一些文字，效果如下：

此时看到的结果是：即使两列数据不同，不会导致两列的高度差异很大，因为根据高度差，数据的排列已经发生了改变，比如，第7个列表笨应该放在第一列的最后，现在因为两边高度的问题，而自动放在了第2列的第一位，也就是我们之前的担心是多余的，系统已经做了处理，但是这样的实现方式，还是有我们之前顾虑的问题，就是对数据的排列有要求的需求，这种方法是不适合的。

以上就是我想到的瀑布流的几种实现方式，欢迎大家有更好的方式的话，我们一起交流一下

修改数据看一下，比如增加一些文字，效果如下：

此时看到的结果是：即使两列数据不同，不会导致两列的高度差异很大，因为根据高度差，数据的排列已经发生了改变，比如，第7个列表笨应该放在第一列的最后，现在因为两边高度的问题，而自动放在了第2列的第一位，也就是我们之前的担心是多余的，系统已经做了处理，但是这样的实现方式，还是有我们之前顾虑的问题，就是对数据的排列有要求的需求，这种方法是不适合的。

以上就是我想到的瀑布流的几种实现方式，欢迎大家有更好的方式的话，我们一起交流一下

瀑布流的3种实现方式相关推荐

【FFMPEG】H264码流的两种组织方式：AnnexB和AVCC
H264码流分两种组织方式,一种是AnnexB格式,一种是AVCC格式 AnnexB格式标准名称是MPEG-2 Tansport Stream Format,适合网络传输和标准的H264文件格式一 ...
html 瀑布流样式,纯css如何实现瀑布流？css实现瀑布流的两种方式
瀑布流的布局感觉还是蛮不错的,所以本篇文章就给大家来分享一下css实现瀑布流布局的两种方法,通过multi-column多列布局实现瀑布流和flex布局实现瀑布流. 1.multi-column多列布 ...
Android 实现瀑布流的两种思路
瀑布流怎么样我就不多介绍了.下面说说我想到的两个方法. 方法一,控件的叠加: ScrollView+LinearLayout.在ScrollView里面加一个水平方向的LinearLayout,在水平 ...
海康摄像头rtsp视频流html直播展示(适用360浏览器)和转rtmp流的一种配置方式
背景: 因一个项目的需要,现有海康摄像头的rtsp流地址,想在web端进行监控视频直播展示,由于实际环境限制,自行搭建流媒体服务器将其转换为更为通用的rtmp流格式的方案无法落地:故最终仍使用rts ...
网页瀑布流效果实现的几种方式
前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb i ...
JavaScript实现自适应宽度的瀑布流
摘要: 主要介绍瀑布流的一种实现方法:绝对定位(css)+javascript+ajax+json.简单一点如果不做滚动加载的话就是绝对定位(css)+javascript了,ajax和json是滚动 ...
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多
一.思路分析和效果图用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...
JavaScript——原生js实现瀑布流
瀑布流介绍及实现原理: 瀑布流是一种页面布局,页面上也有多等宽的块(块就页面内容),每一块都是绝对定位(absolute),每个块排列的方式如下:寻找现在高度最小的列,把该块定位到该列下方.需要知道, ...
Android开发笔记（二十二）瀑布流网格WaterfallGridView
瀑布流网格的产生背景 Android中展示门类信息一般使用列表视图ListView或者网格视图GridView,特别是电商类APP的首页,除了顶部导航.底部标签.上方横幅外,主要页面都是展示各种商品和 ...

瀑布流的3种实现方式

瀑布流的3实现方式

1:js 两列布局实现，思路：左右分为两个容器，根据容器的高度（相对低的那一个）决定下一个元素应该放在哪个容器内，这样视觉就实现了瀑布流的效果，代码如下：

2:js position定位，思路：js记录左右两列的所有元素并计算总高度，决定下一个元素的放置位置（注意：元素与元素之间不能用`margin`,因为这样会影响定位）代码如下：

3: `css`实现

以上就是我想到的瀑布流的几种实现方式，欢迎大家有更好的方式的话，我们一起交流一下

以上就是我想到的瀑布流的几种实现方式，欢迎大家有更好的方式的话，我们一起交流一下

瀑布流的3种实现方式相关推荐

最新文章

热门文章

瀑布流的3种实现方式

瀑布流的3实现方式

1:js 两列布局实现，思路：左右分为两个容器，根据容器的高度（相对低的那一个）决定下一个元素应该放在哪个容器内，这样视觉就实现了瀑布流的效果，代码如下：

2:js position定位，思路：js记录左右两列的所有元素并计算总高度，决定下一个元素的放置位置（注意：元素与元素之间不能用margin,因为这样会影响定位）代码如下：

3: css实现

以上就是我想到的瀑布流的几种实现方式，欢迎大家有更好的方式的话，我们一起交流一下

以上就是我想到的瀑布流的几种实现方式，欢迎大家有更好的方式的话，我们一起交流一下

瀑布流的3种实现方式相关推荐

最新文章

热门文章

2:js position定位，思路：js记录左右两列的所有元素并计算总高度，决定下一个元素的放置位置（注意：元素与元素之间不能用`margin`,因为这样会影响定位）代码如下：

3: `css`实现