CSS 网格实现瀑布流

时间: 2019-07-24阅读: 118标签: 布局

瀑布流布局其核心是基于一个网格的布局,而且每行包含的项目列表高度是随机的(随着自己内容动态变化高度),同时每个项目列表呈堆栈形式排列,最为关键的是,堆栈之间彼此之间没有多余的间距差存大。



代码比较简单:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
}
.pu {
margin: 0 auto;
column-count: 5; /*分为5列 自己设置*/
column-width: 300px; /*设置列宽,即是每列的宽度*/
column-gap: 10px; /*每列和每行的间距为10px 是 column-gap: 10px; row-gap: 10px; 的缩写*/
}
.inner {
break-inside: avoid; /*避免分隔符分开图片*/
margin-bottom: 10px;
}
img {
width: 100%;
}
</style>
</head>
<body>
<div>
<p> <img src="1.webp" > </p>
<p> <img src="1.webp" > </p>
<p> <img src="1.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="1.webp" > </p>
<p> <img src="1.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="2.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="3.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="4.webp" > </p>
<p> <img src="6.webp" > </p>
<p> <img src="6.webp" > </p>
<p> <img src="6.webp" > </p>
<p> <img src="6.webp" > </p>
<p> <img src="6.webp" > </p>
<p> <img src="6.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="6.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="11.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="12.webp" > </p>
<p> <img src="12.webp" > </p>
</div>
</body>
</html>


当然也可以用flex 布局,不过使用flex会比较麻烦。

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9525

关闭

JQuery实现的固定位置下拉隐藏上拉显示悬浮导航菜单

JQuery实现:1、页面打开时,导航栏悬浮的页面上部 2、页面向下拉的时候导航栏隐藏 3、页面向上拉的时候导航栏出现。

移动WEB开发-响应式布局

响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。响应式需要一个父级做为布局容器,来配合子级元素来实现变化效果。

移动端H5固定底部导航菜单的三种布局实现

需要把导航固定在底部?只能滑动内容,导航菜单固定不动的。这篇文章主要讲解三种实现方案,包括:fixed,absolute,以及css3的flex布局。

CSS中的圣杯布局与双飞翼布局

什么是圣杯布局?所谓圣杯布局就是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局;什么是双飞翼布局?和圣杯布局一样,双飞翼布局也是用于实现一个两侧宽度固定,中间宽度自适应的三栏布局,就是布局的形式上存在差异 

响应式布局

Responsive web page响应式布局/自适应网页,可以根据浏览器设备不同(pc,pad,phone)而自动的更改布局,图片,文字效果,不会影响用户体验

css两端对齐——div+css布局实现2端对齐的4种方法总结

css两端对齐,通过margin负值、justify、space-between、column-count等多种方式来实现css的两端对齐。

css之定位

定位是css当中一种操作html元素布局的方案;属性position:static:默认值,无特殊定位,对象遵循HTML原则;absolute:绝对定位,将对象从文档流中完全拖离出来;fixed:类似于绝对定位的方式.

html页面body与div之间产生空白解决方法

在做一个页面输出时发现body与div之间出现20px左右高度的空白,尝试多种方法无解,尤其是方法1也解决不了,后来发现原来是html文件编码格式问题造成的!css初始化,解决不了,就将html文件格式保存为utf-8编码格式,即问题完美解决

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

flex布局,学习flex弹性布局总结

flex布局(Flexible Box)是对界面css盒模型的一个优化,适应不同尺寸的屏幕,被定义flex的容器可以控制子元素的排列方向和大小,能够用更简单清晰的代码来完成复杂的布局。

点击更多...

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广