css实现瀑布流

更新日期: 2022-03-07阅读: 1.1k标签: 瀑布流

jquery时代大多使用插件实现瀑布流布局,但现在我们可以直接使用存粹的css来实现。从css3开始出现了column-count与column-gap后,我们便可直接使用此属性来进行布局,其中column-count代表列数,column-gap代表列之间的距离。值得注意的是,当使用column-count时,容器中不只一个元素时,列末尾容器中一部分元素可能会断裂至另一列中,为防止此种情况发生可以使用break-inside: avoid,避免容器断裂成两部分。
各大浏览器支持程度:


步骤

1、给容器属性column-count与column-gap。
2、给容器中项目属性break-inside: avoid。


实现代码

html代码

  <div class="wrapper">
    <div class="task-container">
      <!--遍历任务列表-->
      <div v-for="(item, index) in taskData" :key="index" class="tasks">
        <div class="task-div">
          <!--任务标签-->
          <span
            :style="{
              backgroundColor:
                tagColorList[Math.floor(Math.random() * tagColorList.length)],
            }"
            v-for="tag in item.tag"
            :key="tag"
            >{{ tag }}
          </span>
          <img
            v-if="item.img"
            :src="taskImgLis[Math.floor(Math.random() * taskImgLis.length)]"
          />
          <h1>{{ item.tit }}</h1>
          <p>{{ item.con }}</p>
          <a href="#">Detalies</a>
        </div>
      </div>
    </div>
  </div>
css代码

<style scoped lang='scss'>
.wrapper {
  margin: 5px auto;
  width: 98%;
  height: 99%;
  overflow: auto;
  .task-container {
    margin: 10px auto;
    width: 99%;
    column-count: 4; /*表示分割的列数 */
    column-gap: 0px;/*表示列之间的间隔*/
    .tasks {
      break-inside: avoid; /*防止元素内部断裂成第二列*/
      margin: 0px 20px 30px 20px;
      background-color: #eff6ff;
      border-radius: 10px;
      padding: 10px;
      .task-div {
        span {
          margin: 10px 10px 10px 0px;
          padding: 3px 5px;
          background-color: #ffe5d3;
          border-radius: 5px;
        }
        img {
          margin: 10px auto;
          width: 100%;
          border-radius: 10px;
        }
        p {
          color: #aaa;
          margin: 0px 0px 10px 0px;
        }
        a {
          padding: 10px 0px 0px 0px;
          text-decoration: none;
          color: #4c33e6;
        }
      }
    }
  }
}
.wrapper::-webkit-scrollbar {
  /*滚动条整体*/
  width: 5px;
  height: 5px;
}
.wrapper::-webkit-scrollbar-track {
  /*滑轨*/
  background-color: #ccc;
  border-radius: 30px;
}
.wrapper::-webkit-scrollbar-thumb {
  /*滑块*/
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 30px;
  cursor: pointer;
}
</style>

链接: https://fly63.com/article/detial/11233

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

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

CSS3实现瀑布流布局

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

js实现无限瀑布流

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

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

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

万能瀑布流

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

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

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

纯CSS瀑布流与JS瀑布流

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

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

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

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

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

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

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

点击更多...

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