纯CSS瀑布流与JS瀑布流

最新推荐文章于 2023-04-20 18:00:56 发布

web世界之窗

最新推荐文章于 2023-04-20 18:00:56 发布

阅读量141

点赞数

文章标签： html css javascript 前端 web前端

本文链接：https://blog.csdn.net/weixin_45974707/article/details/103645222

版权

瀑布流布局是一种流行的网页设计方式，节约空间，提供良好用户体验。纯CSS瀑布流利用multi-columns方法，但无法实现动态加载效果，而JS通过判断最小高度列来动态放置元素，实现真正的瀑布流布局。本文探讨了CSS与JS实现瀑布流的原理和方法。

摘要由CSDN通过智能技术生成

瀑布流

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

为什么使用瀑布流

瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个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="ite