前阵子有朋友问到，要如何制作瀑布流的相本，说真的一般提到瀑布流的效果，大部分都是采用javasciprt的方式来呈现，虽然先前梅干曾利用Bootstrap的网格系统，实作出像flickr的相本的呈现方式，让图片有大有小的多种组合，但这有个前题是，当把版面规划出来后，照片就得依照版面的规画，挑选适合的照片。
但这对于应用在作品集的页面中，就显得有些绑手绑脚的，因此梅干除了研究几个jQuery相关的套件外，最后梅干脑海突然想到，在CSS中的column的属性，或许有机会可以实现，因此梅干就使用了CSS中的column属性，也成功的实现出瀑布流的效狭，同时还会自动计算出目前页面中的照片高度，并自动的排序照片，让版面运用上更加的灵活， 至于要怎么作，现在就一块来看看啰！
Step1
首先，先在HTML中，分别在外层建立一个secion，然后section的底下再建立多个div，这时在不作任何设定的情况下，可看到画面中的123456会以垂直呈现。
Step2
接着再到CSS将区块设为column再它设为3就表示要把页面分割成三等份，再时再gap设定间距，以及这个区块的大小。
Step3
都设定好后，再把刚刚的数字替换成照片，同时再到css的地方，加入img的宽、高层性，再重新整理一下页面，这时磺会看到画面中的照片，就会自动侦测照片的长、宽，并以垂直作排序，且效果相当的不错，因此有需要的朋友，下回不妨可试试啰
#範例預覽
https://codepen.io/minwt/embed/mdxEKZr?default-tab=html%2Cresult
微信扫一扫
相关推荐
-
《热血三国志》中文版今天上市，举办庆祝上市活动！
发行商亚克系统（ARC SYSTEM WORKS）亚洲分店宣布，《热血》系列 35 周年最新作品《热血三国志》官方中文版今（21）日正式上市，并且同时举办庆祝上市活动。 《热血三国…
-
安卓手机玩《仙剑奇侠传3》的那些事-奶妈级教程
Hello亲爱的兄弟们，前几天我做了一个安卓手机玩《仙剑奇侠传2》的视频，然后，然后我就沉迷了，一直沉迷到了今天我把仙剑2彻底打通关，所以就拖到了现在才更新。 我看到有兄弟留言说也…
-
《战神 诸神黄昏》巨人版40公分雷神之鎚坐镇，官方开箱影片亮相
已经敲定11月9日发售的《战神诸神黄昏》（God of War Ragnarök），索尼日前公开了全产品信息，外加「收藏版」与「巨人版」的开箱视频，展现40公分雷神之鎚的巨大魄力。…
-
Gravity 于 G-Star 2022 展出以《RO 仙境传说》魔物题材开发的三款休闲手游
韩国游戏厂商Gravity在G-Star 2022 「Gravity Arise」展区公开了以《RO 仙境传说》当中人气的魔物角色为主题开发的三款休闲向游戏，分别结合三消、大富翁、…
-
cf个人竞技技巧(cf怎么玩好个人竞技)
想要玩好个人竞技不是单纯的依靠枪法，同时要具有非常快的反应、意识，当然还需要玩家熟悉各个复活点。下面小编就为大家讲解如何在个人竞技模式中打出好战绩。 1.武器选择 对于武器的选择在…
-
《原神》感电伤害取决于什么？
原神感电伤害 感电伤害取决于以下因素： 1、伤害基数 根据角色等级提升而提升的伤害基数，只与角色等级有关，与角色差异无关。各等级感电伤害基数数据可参考如下： 2、反应伤害提升 相当…
