瀑在哪里可以看到？国内这几个地方很出名！

今天心血来潮，想搞个瀑布流的效果，就自己动手试试。

折腾的开始

我啥也不懂，就到处找资料看。看半天，感觉脑子里还是一团浆糊，各种各样的说法，越看越乱。我决定不管那么多，先动手做做看！

初步尝试

我先建个HTML文件，然后随便弄几个div，给它们设置不同的高度，模拟一下图片大小不一的效果。样式方面嘛就简单地设置宽度，然后让它们左浮动（float:left;）。

结果，你们猜怎么着？这些div是横向排列，但根本不是瀑布流！它们只是简单地从左到右排，高度参差不齐，看起来乱糟糟的。

继续摸索

我想，这样不行，得想办法让它们“流”起来。于是我又回去翻资料。这回我注意到一个叫“多列布局”的东西，好像跟瀑布流有点关系。

我试着用CSS的column-count属性，把页面分成几列。这下，div们总算竖着排，有点瀑布流的样子！但是，新的问题又来：这些div的顺序被打乱，不是按照我想要的顺序排列的。

找到方向

我又是一顿折腾，发现column-count这种方式不太适合我的需求，因为它会改变元素的排列顺序。我想要的是那种，元素按照顺序，依次填充到最短的那一列的效果。

看来，只能用JavaScript来实现。我开始研究各种瀑布流的JavaScript实现方法，发现大部分都是通过计算每一列的高度，然后动态地设置元素的位置来实现的。

动手实现

我找一个看起来比较简单的实现方法，开始照着代码敲。我要获取到所有的div元素，然后计算出每一列的宽度，以及整个容器的宽度。

我要创建一个数组，用来记录每一列当前的高度。初始状态下，所有列的高度都是0。

然后，我开始遍历所有的div元素。对于每一个元素，我要找到当前高度最小的那一列，然后把这个元素放到那一列的下面。具体做法就是，设置这个元素的position为absolute，然后通过top和left属性来定位。

关键点来！在设置完元素的位置之后，我要更新一下这一列的高度，加上刚刚放进去的那个元素的高度。

循环结束后，所有的元素就都按照瀑布流的方式排列好！

最终效果

看着最终的效果，我还是挺有成就感的。虽然过程有点曲折，但总算是搞定！

这回折腾让我明白，实践出真知！很多东西，光看理论是不够的，还得自己动手试试才知道是怎么回事。而且遇到问题不要怕，多尝试，多思考，总能找到解决办法的！