前端瀑布流的实现方法总结

看到网上有很多实现瀑布流的方法，一开始想用纯css试，试了很多后放弃了，网上有很多方法，但是要么代码很复杂，要么不能完美实现。说说我尝试过的方法

第一种JS为主，逻辑复杂，代码多，放弃

第二种用flex布局，float布局都会导致垂直方向间距较大等问题，无法完美实现。

第三种用column布局，这个方法会导致原本一个整体元素被拆分为若干份，会出现元素一部分在一列底部，另一部分在另一列顶部的情况，无法完美实现。2023/8/12日更新：break-inside属性可以解决截断问题，但column会默认优先竖向排列，不能横向排列

还有用一些奇怪的js+css方法的，都无法实现。目测当前不用插件能完美实现的只有第一种方法。

第四种就是用插件，例如 Masonry、Isotope 等

以Masonry为例，引入插件直接调用就行，插件下载地址：

BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

插件参数和方法可以看这篇文章：

瀑布流插件Masonry使用教程_小言_互联网的博客_wya1

<script src="js/masonry.min.js"></script>
<script>
    //                       $('.grid').append( $content ).masonry( 
    //   'appended', $content );
        $('.company_body').masonry({
            itemSelector: '.company_item',
            columnWidth: 150,
            horizontalOrder:true,
            percentPosition:true,
            gutter:10,
            fitWidth: true
        });
</script>

 Masonry会让每个item定位为绝对定位（absolute），这样就让实现两端对齐的瀑布流变得困难了。还有令人头疼的是gutter参数只能使用像素（px）为单位，而且不支持小数，所以只能用js计算百分比得到参数再赋值，一定要取容器宽度的值的百分比！！不要取到窗口的宽度了

    const gutter = Math.floor($('.company_body').width() * 0.04)
        $('.company_body').masonry({
            itemSelector: '.company_item',
            horizontalOrder:true,
            gutter:gutter,
        });

这样就实现两端对齐的瀑布流了

滑动加载参考这里：

jQuery瀑布流插件masonry使用教程 - 简书 (jianshu.com)

这个插件似乎不能和new IntersectionObserve()或图片懒加载使用，会导致top获取不正确导致item重叠情况