我们已经有了图库的网格布局。不幸的是，它的加载有点突然且不稳定。这是因为 CSS3 列被设计成将内容均匀地分配到各个列中，但图像有时需要一段时间才能加载，并且还没有宽度/高度可以使用。因此，当它们弹出时，列需要重新排列自己。
我认为我们可以通过一些 JavaScript 来防止这种不稳定。由于我们知道图像的高度和宽度，我们可以创建一个具有正确纵横比的框作为占位符放在那里。然后，当图像加载后，我们将用图像替换占位符。
在视频结束时，我们走上了正轨，但它有点问题。别担心，我们将在下一个视频中修复它。
我知道你采取了不同的方向，但仅供参考：div 流向下一列，因为这是列的魔力的一部分（因为文本只是流向下一列）。
有一个
column-break-inside: avoid;属性可能会有帮助，但支持不稳定（请参阅caniuse上的说明）。