瀑布流的效果布局图标瀑布流显示是什么意思( 三 ) _生活百科

auto：表示自动放置

自定义名称：可以给予网格线一个名称，并在此处引用(本文并不涉及)

网格线索引: 代表第几条网格线(从1开始)

span+数字 : 表示上下边框或左右边框跨越多少网格

来看看这个网格线用处
为方便查看，我们让例子中的每个div块高度修改为100% ，并将样式代码修改为：
.item{ height:100%;}.item:first-child{ grid-row-start:1; grid-row-end:span 2;}
在线Demo及完整代码地址：
效果如下：

文章插图
我们对 Grid布局中的第一项添加了 grid-row-start:1和 grid-row-end:span2,令其上边框位于1水平网格线，下边框距上边框跨越2个水平网格线。从效果上看来，是不是有点像瀑布流了呢！
在之前的例子中，我们分别指定了 grid-template-columns和 grid-template-rows用于定义几行几列，由于行列数的确定，其内的每个单元格的宽高也被确定了，而实际的瀑布流布局中，宽度是固定的，而高度是动态的，并且具体的行数也是无法在开始时确定的，所以我们需要在 Grid布局中不指定行高(grid-template-rows) 。
介绍另一个属性：
grid-auto-rows：用来设置多余网格的行高
结合刚才说的Grid实现的瀑布流布局中，不设置行高(grid-template-rows),此时设置 grid-auto-rows后，所有单元格的高度均为 grid-auto-rows指定的值。
由于 grid-row-start和 grid-row-end可以指定单元格的上边距和下边距位置，也就是说可以将单元格的高度拉伸，而原有高度由 grid-auto-rows决定，我们仅需将 grid-auto-rows设置一个很小的值，比如 10px ，然后对其进行拉伸将其高度指定为真实高度，每一个单元格都做如下操作，那么瀑布流就实现了~
假设第一个单元格内容真实高度为100px ，由于 grid-auto-rows:10px,那么我们可以这样设置：
.item1{ grid-row-start:’auto’; grid-row-end:span 10;}
假设第二个单元格内容真实高度为150px ，由于 grid-auto-rows:10px,那么我们可以这样设置：
.item2{ grid-row-start:’auto’; grid-row-end:span 15;}
当然了，在实际情况中，瀑布流更多的是为图片的展示而服务的，并且由于图片是异步请求加载，只有在加载完成后才能获取图片的真实宽高，所以不得不使用JS来动态将单元格高度进行拉伸。
伪代码如下：
//image-dom let img = document.getElementsByTagName(‘img’)[0]; //image-dom 当前宽度 let width = img.width; let image = new Image(); image.src = https://www.fajihao.com/i/‘xxxx.img’; image.onload = function(){ //图片原宽 let w = image.width; //图片原高 let h = image.height; //image-dom的真实高度(依据当前宽度及图片真实宽高) let height = Math.round(h * width / w) //设置当前跨越几个网格(每个网格10px) img.style.gridRowEnd = `span ${~~(height/10)}` }
在线Demo及完整代码地址：
效果如下：

文章插图
Flexbox 实现瀑布流
Flexbox布局到今天已经是使用非常广泛的，也算是很成熟的一个特性。在此就不再介绍 Flexbox布局的相关内容，如果还有不是很了解的朋友，可参见阮一峰的《Flex 布局教程：语法篇》（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）
那接下来我们就看 Flexbox怎么实现瀑布流布局。
此时，我们需要将html结构设计成如下结构：

上面代码中 div.masonry代表当前瀑布流容器， div.column代表每一列的容器， div.item代表每一列中的每一项。
我们需要将 div.masonry和 div.column都通过 display:flex将其设置为 Flex容器。
不同的是瀑布流容器主轴方向设置为水平方向 flex-direction:row, 列容器主轴方向设置为垂直方向 flex-direction:column
.masonry { display: flex; // 设置为Flex容器 flex-direction: row; // 主轴方向设置为水平方向} .column { display: flex; // 设置为Flex容器 flex-direction: column; // 主轴方向设置为垂直方向}
由于当前的html结构分为了瀑布流容器和列容器，并且常见的需求图片均是从左至右再从上到下来进行排列，所以需要通过 Javascript来区分每一列的具体数据：
假设分为三列，伪代码如下：

瀑布流的效果布局 图标瀑布流显示是什么意思( 三 )

瀑布流的效果布局图标瀑布流显示是什么意思( 三 )