高级CSS属性实现瀑布流的三种方式。视觉表现是锯齿状的多列布局。随着页面滚动条的向下滚动，这个布局会不断地加载数据并追加到当前尾部。是一种多列等宽不同高的页面布局方式。可以在图片比较复杂，图片尺寸比较复杂的时候使用。这种显示方式可以使页面更加美观，让人感受到错落有致的感觉。瀑布流是一种交互形式，允许用户连续向下滑动，页面自动刷新呈现内容。Waterfall的主要特点是拼凑而成，定宽不定高的设计使得页面有别于传统的矩阵图布局模式。其优缺点如下：优点：节省空间，美观，更具艺术感。对触屏设备非常友好。通过向上滑动浏览，用户的观看和思考不会被轻易打断，更容易留存。缺点是：用户无法理解内容的总长度，无法对内容进行宏观控制。用户无法知道他现在在哪里，或者他离终点有多远。回溯时，不容易定位到之前看到的内容。容易造成页面加载负载。用户浏览很容易产生疲劳，没有短暂的休息时间。多列布局实现瀑布流看这段代码，我们直接在最外层的容器中添加cloumn-count:3属性，将其分为三列，然后添加column-gap来调整每列之间的间距Spacing，此外，我们还在item子容器中添加了break-inside:avoid以确保每个子元素在包装之前呈现。网格布局实现瀑布流让我们再看看你的代码。首先设置外包装容器为grid网格布局，使用grid-template-columns:1fr1fr1fr属性将其分为三列。使用grid-auto-rows设置网格中行的大小，最后使用column-gap设置网格各列之间的间距。在这个网格布局中，我们还写了一段js获取照片的宽高来设置每张照片占多少行，并在item中添加item.style.gridRowEnd=span${~~(height)}property，为了确认每张照片在grid中占据的行数：elastic布局实现瀑布流接下来我们看这段代码，这段代码利用了elastic布局的巧妙之处，在最外层使用了一层divwrap，然后把item里面包裹一层div，外面的div默认用一行水平弹性排列。内层div设置为垂直弹性布局，实现瀑布式布局。结语这三种瀑布流布局的实现都是用高级css属性实现的，比直接在js中写获取每张图片的高度进行布局要简单的多，但是各有优缺点。场景使用合理。
