Logo

css实现瀑布流排版

photo

2023年09月15日

网上有很多有关js(jq)实现瀑布流和有关瀑布流的插件很多,例如:插件(MasonryWookmark等等)。按照正常的逻辑思维,瀑布流的排版(item列表)一般都是 由左到右,上而下排序的结果,单纯的css实现这一点有些困难 ,下面分享一款由css局实现的瀑布流效果,虽然效果难以达到有些插件的效果,但也算是简单实用吧。

实现效果图:

 

html结构:

<div class="waterfall">
   <div class="item">
      <div class="item-content">
         三月到大理赏樱花不远不近
      </div>
   </div>
   <div class="item">
       <div class="item-content">
          三月到大理赏樱花不远不近,才是最好的距离余生,请带上自己的阳光回忆,在部队那些日子被遗忘的花儿春光
       </div>
   </div>
   <div class="item">
      <div class="item-content">
          三月到大理赏樱花不远不近,才是最好的距离余生,请带上自己的阳光回忆
      </div>
   </div>
</div> 

关于item列表,我添加的比较少,您多添加几个就可以了……

 

css样式:

.waterfall{
  column-count: 3;
  column-gap: 0;
}
            
.item{
  box-sizing: border-box;
  break-inside: avoid;
  padding: 10px;
}
.item-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
  height: auto;
  font-size: 20px;
  color: #686868;
  box-sizing: border-box;
  border: 1px solid #ccc;
}

 

这样css的简单瀑布流布局就可以了~

橙子主题打折出售

其实我不卖,主要是这里是放广告的,所以就放了一个
毕竟主题都没做完,卖了也是坑.

购买它
本文为原创文章,请注意保留出处!
PhpStorm设置FTP功能 2023年09月15日

1、版本介绍本文操作针对PhpStorm2020.1版本2、【ctrl+alt+s...PhpStorm设置FTP功能

热门文章

修复群晖Synology Drive client右键菜单缺失问题 本教程主要解决windows10右键菜单中没有SynologyDrive菜单的问题,整体思路是找到...修复群晖SynologyDriveclient右键菜单缺失问题 作者:Pastore Antonio
1983 浏览量
docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 前言:有时候我们会在docker上下载一个镜像,或者是上传一个镜像到docker上,甚至有时候就是在...docker如何查看一个镜像内部的目录结构及其内部都有哪些文件 作者:Pastore Antonio
1925 浏览量
Adobe Acrobat Pro 激活 这里记录了一些AdobeAcrobat的激活教程和组件。浏览量:1,808 作者:Pastore Antonio
1651 浏览量
追寻日出,找回自己 为什么我要去追寻日出?其实我是一个很懒的人,每次都起不来,直到有一次我在租房中睡到了大天亮,阳光照...追寻日出,找回自己 作者:Pastore Antonio
1607 浏览量
Swagger2 接口多级分组方法 swagger无疑是Java开发的最佳伴侣,接口非常方便调试;当然也有用Postman,因人而异吧...Swagger2接口多级分组方法 作者:Pastore Antonio
1524 浏览量