引入并调用瀑布流相关插件

<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/colorfinder-1.1.js"></script>
<script src="js/gridScrollFx.js"></script>
<script>
    new GridScrollFx(document.getElementById('grid'), {
        viewportFactor: 0.4
    });
</script>

瀑布流布局html代码

<ul class="grid swipe-right" id="grid">
    <li class="title-box">
        <h2>作者 <a href="https://jy.tp.yuanmeng.life/">智慧小屋</a></h2>
    </li>
    <li><a href="https://jy.tp.yuanmeng.life/js/574.html"><img src="https://jy.tp.yuanmeng.life/jquery/5/571/demo/images/pic/03.jpg" alt="智慧小屋"><h3>cxSelect多级省市区联动插件 </h3></a></li>
    <li><a href="https://jy.tp.yuanmeng.life/js/572.html"><img src="https://jy.tp.yuanmeng.life/jquery/5/571/demo/images/pic/01.jpg" alt="智慧小屋"><h3>jQuery指针不动转盘动的Rotate转盘插件</h3></a></li>
    <li><a href="https://jy.tp.yuanmeng.life/js/571.html"><img src="https://jy.tp.yuanmeng.life/jquery/5/571/demo/images/pic/02.jpg" alt="智慧小屋"><h3>jquery仿美丽说瀑布流效果 </h3></a></li>
</ul>

演示一：向右滑动 swipe-right

<ul class="grid swipe-right" id="grid">

演示二：向下滑动swipe-down

<ul class="grid swipe-down" id="grid">

演示三：旋转效果swipe-rotate

<ul class="grid swipe-rotate" id="grid">