资讯专栏INFORMATION COLUMN

纯CSS响应式瀑布流 columns

番茄西红柿 / 1177人阅读

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

效果图 

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; 我也是刚学的,不太大懂意思

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

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

相关文章

  • CSS响应瀑布 columns

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

    levius 评论0 收藏0
  • css实现瀑布(multi-column多列及flex布局)

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

    DC_er 评论0 收藏0
  • css实现瀑布(multi-column多列及flex布局)

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

    MangoGoing 评论0 收藏0
  • 瀑布之实例进阶

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

    Baoyuan 评论0 收藏0
  • 瀑布插件Masonry中文文档【翻译】

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

    soasme 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<