瀑布流的布局原理分析(纯CSS瀑布流与JS瀑布流)

更新日期: 2019-09-26阅读: 2.5k标签: 瀑布流

瀑布流 

又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。



为什么使用瀑布流

瀑布流布局在我们现在的前端页面中经常会用的到,它可以有效的降低页面的复杂度,节省很多的空间,对于整个页面不需要太多的操作,只需要下拉就可以浏览用户需要看到的数据;并且,在当前这个APP至上的时代,瀑布流可以提供很好的用户体验,通过结合下拉刷新,上拉加载进行数据的懒加载等操作,对于用户的体验感来说是接近于满分的!

 

瀑布流的特点

其实瀑布流的特点就是参差不齐的排列方式,以及流式布局的扩展性,可以通过界面展示给用户多条数据,并且让用户可以有向下浏览的冲动。

 

瀑布流的代码实现

1.纯 css 瀑布流:( multi-columns 方法 )

// 这里是第一次接触到 column-columns 这个属性,这是一个可以设置将div元素中的文本分成几列

//默认值是:auto

//写法:

column-count:3;
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */

/* 注意:IE9及更早 IE 版本浏览器不支持 column-count 属性 */

//这里还会用到另一个属性 column-gap,用来调整边距,实现瀑布流布局

 

html结构代码如下:

<div class="demo-1"> 
    <div class="item"> 
        <div class="item_content content-lar" style="height:100px;" > 1</div> 
    </div> 
    <div class="item"> 
        <div class="item_content content-sma"style="height:150px;" > 2</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"style="height:50px;" > 3</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-sma" style="height:200px;" > 4</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"style="height:60px;" > 5 </div> 
    </div>
    <div class="item"> 
        <div class="item_content content-lar"style="height:90px;" > 6</div> 
    </div> 
    <div class="item"> 
        <div class="item_content content-sma"> 7</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-lar"style="height:120px;" > 8</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-lar"> 9</div> 
    </div>
    <div class="item"> 
        <div class="item_content content-sma" style="height:100px;" > 10 </div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"> 11 </div> 
    </div>
    <div class="item"> 
        <div class="item_content content-mid"style="height:100px;" > 12</div> 
    </div>
    <!-- more items --> 
</div>

CSS代码如下:

.demo-1{ 
       -moz-column-count:3; /* Firefox */
       -webkit-column-count:3; /* Safari 和 Chrome */
       column-count:3;
       -moz-column-gap: 1em;
       -webkit-column-gap: 1em;
       column-gap: 1em;
       width: 80%;
       margin:0 auto;
    }
    .item { 
        padding: 2em;
        margin-bottom: 2em;
        -webkit-column-break-inside: avoid;
        break-inside: avoid; /*防止断点*/
        background: #ccc;
        text-align: center;
    }


效果图:


这里有个弊端,这并不符合瀑布流的原理,如果使用纯css写瀑布流,则每一块都是从上往下排列,不能做到从左到右排列,并且不会识别哪一块图片放在哪个地方合适,若是再配合动态加载,效果会特别不好,所以只能通过JS来实现瀑布流。

那么这里用图片来分析一下我们想要的瀑布流是什么样的。

 

瀑布流的位置分析图解

如下方图片。假设一排放5张图片。当第一排排满足够多的等宽图片时,显示的是这样的。那么假如我们要放第6张图片的时候,应该放在什么位置呢?


如果按照我们的正常逻辑来想,应该是放在第一张图片下面,依次水平排列过去(如下图)


但现实并非如此!在瀑布流中,从第2行开始,接下去的每一张图片都会放在上行中高度最低的那一列图片下方。(如下图)


为什么呢?因为放置它之前,这一列的高度为所有列中最小,所以会放置在这个地方。

那么如果再继续放置下去,第七张图片应该放在第三列图片下方,以此类推。


所以每次加载图片时,会需要判断哪一列的图片累计的高度最小,那么下一张图片就放在哪一列,即瀑布流算法去判断图片的确定位置。

 

JS代码实现

实现思路:

  1.   设定每一列图片的宽度和间距
  2.   获取当前窗口的总宽度,从而根据图片宽度去旁段分成几列
  3.   获取所有图片元素,定义一个空数组来保存高度
  4.   遍历所有容器,开始判断  当页面加载完成,或页面宽度发生变化时,调用函数
    • 如果当前处于第一行时: 直接设置图片位置【 即 top为间距的大小,left为(当前图片的宽度+间距) * 当前图片的值+间距大小 】,并保存当前元素高度。
    • 如果当前不处于第一行时:进行高度对比,通过遍历循环,拿到最小高度和相对应的索引,设置图片位置【 即 top为最小高度值+间距*2,left为 (当前图片的宽度+间距) * 索引 值+间距大小)】,并修改当前索引的高度为当前元素高度。
  5.   当页面加载完成,或页面宽度发生变化时,调用函数。

 

代码实现

<script type="text/javascript">
    // 定义瀑布流算法函数
    function fall() {
        const minGap = 20; // 最小间距,让每一列的最小空隙可以自定义,避免太过拥挤的情况发生。但是,会通过计算得到真实的间距。
        const itemWidth = 300; // 每一项的宽度,即当前每一个图片容器的宽度。保证每一列都是等宽不等高的。
        const scrollBarWidth = getScrollbarWidth();    // 获取滚动条的宽度
        const pageWidth = window.innerWidth - scrollBarWidth; // 获取当前页面的宽度 = window.innerWidth - 滚动条的宽度
        const column = Math.floor(pageWidth / (itemWidth + minGap)); // 实际列数=页面宽度/(图片宽度+最小间距)
        const gap = (pageWidth - itemWidth * column) / column/2; // 计算真实间距 = (页面宽度- 图片宽度*实际列数)/实际列数/2
        const items = document.querySelectorAll('img'); // 获取所有的外层元素
        const heightArr = []; // 定义一个空数组,保存最低高度。
        
        // 获取滚动条的宽度
        function getScrollbarWidth() {
            const oDiv = document.createElement('div');//创建一个div
            // 给div设置样式。随便定义宽高,只要能获取到滚动条就可以
            oDiv.style.cssText = `width: 50px;height: 50px;overflowY: scroll;` 
            document.body.appendChild(oDiv);//把div添加到body中
            const scrollbarWidth = oDiv.offsetWidth - oDiv.clientWidth;// 使最大宽度和可视宽度相减,获得到滚动条宽度。
            oDiv.remove();//移除创建的div
            return scrollbarWidth;//返回滚动条宽度
        }
        
        
        for (let i = 0; i < items.length; i++) {
            // 遍历所有的外层容器
            const height = items[i].offsetHeight;
            // 如果当前处在第一行
            if (i < column) {
                // 直接设置元素距离上部的位置和距离左边的距离。
                items[i].style.cssText = `top: ${gap}px;left: ${(itemWidth + gap) * i + gap}px`;
                // 保存当前元素的高度。
                heightArr.push(height);
            } else {
                // 不是第一行的话,就进行比对。
                let minHeight = heightArr[0]; // 先保存第一项的高度
                let minIndex = 0; // 保存第一项的索引值
                for (let j = 0; j < heightArr.length; j++) {
                    // 通过循环遍历比对,拿到最小值和最小值的索引。
                    if (minHeight > heightArr[j]) {
                        minHeight = heightArr[j];
                        minIndex = j;
                    }
                }
                // 通过最小值为当前元素设置top值,通过索引为当前元素设置left值。
                items[i].style.cssText = `top: ${minHeight + gap *2}px; left: ${(itemWidth + gap) * minIndex + gap}px`;
                // 并修改当前索引的高度为当前元素的高度
                heightArr[minIndex] = minHeight + gap + height;
            }
        }
    }
    // 页面加载完成调用一次。
    window.onload = fall;
    // 页面尺寸发生改变再次调用。
    window.onresize = fall;
</script>

最终效果图:



总结瀑布流布局原理

  • 设置图片宽度一致
  • 根据浏览器宽度以及每列宽度计算出列表个数,列表默认0
  • 当图片加载完成,所有图片依次放置在最小的列数下面
  • 父容器高度取列表数组的最大值

引申知识点

  • let,const以及var三者的区别
  • 滚动加载图片(懒加载原理)
  • 反撇号(`)基础知识
  • style和style.cssTest 的区别

 

链接: https://www.fly63.com/article/detial/5556

vue实现瀑布流布局的组件/插件总汇

瀑布流作为当前比较流行的一种网页布局方式,在视觉上呈现出参差不齐、琳琅满目、唯美的视觉效果,该布局随着页面滚动,数据不断加载并附加至当前页面的尾部。这篇文章主要介绍关于vue框架中常使用的瀑布流组件

CSS3实现瀑布流布局

瀑布流布局是种常见的布局方式,常用于图片相关的样式展示,通过CSS3的多列(Multi-column)属性,可以简单的实现类似效果。设置外部容器多列列数(column-count)和列间距(column-gap)

js实现无限瀑布流

是一种常见的网页布局方式,在许多网站中我们都能看到“瀑布流”的效果,其特征是有网页视窗有多个高度不同宽度相同的“块”组成。因其样式酷似飞流直下的瀑布,故将这种布局方式称为瀑布流。

万能瀑布流

常见的瀑布流实现大部分只适用于子块尺寸固定或内部有图片异步加载的情况。而对于子块有图片这种可能引起尺寸变化的情况,通常的做法是写死图片高度,或检测内部的 img 元素从而在 onload 事件中进行重排。

原生JS实现一个瀑布流插件

瀑布流布局中的图片有一个核心特点 —— 等宽不定等高,瀑布流布局在国内网网站都有一定规模的使用,比如pinterest、花瓣网等等。那么接下来就基于这个特点开始瀑布流探索之旅。

纯CSS瀑布流与JS瀑布流

又称瀑布流式布局,是比较流行的一种网站页面布局方式。即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果。然后针对这几个效果的实现,捋下思路:根据加载数据的顺序,依次追加标签展示效果;

小程序实现瀑布流和上拉加载

瀑布流又称瀑布流式布局,是比较流行的一种网站页面布局方式。视觉表现为参差不齐的多栏布局,即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高。基本思路就是利用wx:if和数组的下标对2取余来判断是排在左列还是排在右列

JavaScript实现简单的图片瀑布流插件

JavaScript实现简单的图片瀑布流插件,功能:1).可以自动根据浏览器视口宽度,改变图片瀑布流的宽度2).添加了函数防抖功能

css实现瀑布流布局

依赖 column 便可实现最简单实用的瀑布流布局,我这里前端框架用的是 Vue, 用其他的也一样,column-count: 3; 内容均分三份

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!