纯CSS响应式瀑布流 columns

levius 发布于2019-05-22 14:42 / 949人阅读

摘要：效果图缩小一点板端鸡端疯六这个响应式瀑布流误打误撞写出来的，因为之前看百度写过瀑布流，不太好，好复杂，又要什么的，我就懒，算了算了，不写了。

效果图

PC 1366*768

缩小一点

板端

鸡端疯六

这个响应式瀑布流误打误撞写出来的，因为之前看百度写过瀑布流，不太好，好复杂，又要JS什么的，我就懒，算了算了，不写了。

然后今天早上就看完数据结构教程，无聊，顺便看慕课网的瀑布流教程，发现一般般，不过学到了用columns，然后又谷歌到了 break-inside 额，发现很OK喔，就OK了。

我习惯写注释在代码那里，这样感觉容易看懂些，不然看一下代码，看一下解释，麻烦。

滚到最下面是全部代码。

CSS代码：核心 * { margin: 0; padding: 0; }
.waterfalls { padding:10px; position: relative; margin: 0 auto; columns:200px; /* 每列每个元素最小的宽度 */ column-gap: 20px; /* 每列的距离，不设置这个可以通过margin来设置边距 */ }
.box { break-inside: avoid; /* 这个是设置多列布局页面下的内容盒子如何中断，如果不加上这个，每列的头个元素就不会置顶，配合columns使用 */ margin-bottom:15px;

/* 如果是非图片瀑布流的话就加上背景吧，不然感觉不太好看。 */

/* background:dodgerblue; */ color:white; border-radius:5px; }
.pic img { width: 100%; /* 建议每个图片宽高为100%，如果不设置宽高，就会溢出外层盒子的，或者设置固定宽度，最好不要宽过外层盒子或者高过外层盒子。这里说的外层盒子就是html代码里的 .box */ height: 100%; border-radius: 5px; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); } 不加一些样式的问题：

不加 break-inside: avoid;

就是每列元素不置顶嘛，而break-inside: avoid; 我也是刚学的，不太大懂意思

云服务器 GPU云服务器响应式瀑布流瀑布流瀑布流方式 gridview瀑布流

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/6737.html

纯CSS响应式瀑布流 columns

摘要：效果图缩小一点板端鸡端疯六这个响应式瀑布流误打误撞写出来的，因为之前看百度写过瀑布流，不太好，好复杂，又要什么的，我就懒，算了算了，不写了。效果图PC 1366*768showImg(https://user-gold-cdn.xitu.io/2019/5/20/16ad4b60c469301f);缩小一点showImg(https://user-gold-cdn.xitu.io/2019/...

番茄西红柿 2019-05-23 15:55 评论0 收藏0
纯css实现瀑布流（multi-column多列及flex布局）

瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度还要结合在子容器中...

DC_er 2019-08-02 16:03 评论0 收藏0
纯css实现瀑布流（multi-column多列及flex布局）

瀑布流的布局自我感觉还是很吸引人的，最近又看到实现瀑布流这个做法，在这里记录下，特别的，感觉flex布局实现瀑布流还是有点懵的样子，不过现在就可以明白它的原理了 1.multi-column多列布局实现瀑布流先简单的讲下multi-column相关的部分属性 column-count设置列数 column-gap设置列与列之间的间距 column-width设置每列的宽度还要结合在子容器中...

MangoGoing 2019-08-29 16:38 评论0 收藏0
瀑布流之实例进阶

摘要：瀑布流也应该算是流行几年了吧。开始刷新的设置就很简单了，瀑布流刷新只和一个事件有关，即，主要的算法即，当页面滑动到最低高度的时候开始加载节点并且添加，当然，节点添加的个数是不固定的。这时候，就需要获取实际尺寸然后进行一个计算才行。瀑布流也应该算是流行几年了吧。首先是由Pinterest掀起的浪潮，然后国内设计如雨后春笋般，冒出很多瀑布流的例子，比如，蘑菇街，Mark之(不过最近涉黄，...

Baoyuan 2019-08-19 17:32 评论0 收藏0
瀑布流插件Masonry中文文档【翻译】

摘要：本位为官方文档翻译，原始链接安装下载下载压缩或未压缩的压缩未压缩在直接饮用文件。排列未加载完成的图片时会导致元素的重叠，可以解决这个问题。布局组件尺寸尺寸配置项和可以可以设置组件的列宽和间距。增加移除控件在瀑布流末尾增加新控件并重排。本位为Masonry官方文档翻译，原始链接安装Install 下载下载压缩或未压缩的masonry masonry.pkgd.min.js （压缩...

soasme 2019-08-22 15:18 评论0 收藏0