web网页，瀑布流，加载更多(masonry+imagesLoaded+bootstrap+ajax)

J_Wangzai

于 2024-03-05 10:53:22 发布

阅读量603

点赞数 5

文章标签：前端 bootstrap ajax jquery

本文链接：https://blog.csdn.net/J_1999_0524/article/details/136472476

版权

本文介绍了如何在网页中使用CDN加载masonry.js和imagesLoaded.js库，解决图片加载问题，并在数据加载更多时动态更新瀑布流布局，确保图片不会重叠且布局保持一致。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路

直接使用masonry.js的话加载时会导致图片重叠，所以引入
imagesLoaded.js,图片加载后再使用masonry.js布局

masonry.js+imageLoaded

var $grid = $('.grid').imagesLoaded( function() {
  // init Masonry after all images have loaded
  $grid.masonry({
    // options...
  });
});

类似于网页中加载更多时，会使用ajax，点击一次会进行一次ajax请求，数据图片数据会拼接，此时新的数据会覆盖之前的数据，所以还需要用到masonry.js的两个配置


  $(".masonry-wrap").imagesLoaded(function() {
          $('.masonry-wrap').masonry('reloadItems'); // 重新加载图片
          $('.masonry-wrap').masonry('layout'); // 重新布局
  });

实现

cdn

<!-- masonry,imagesloaded,jquery-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/masonry/4.2.2/masonry.pkgd.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery.imagesloaded/5.0.0/imagesloaded.pkgd.js" type="application/javascript"></script>

html

<!-- 瀑布流图片 -->
<div class="container text-capitalize mb-16 pt-4 pt-sm-0">
    <h2 class="fs-5 fw-bold mb-6"><?= $curCate['title'] ?></h2>
    <div class="row row-cols-sm-4 row-cols-2 g-4 g-sm-8 masonry-wrap" id="newsList">
    </div>
    <div class="text-center pt-10r pb-16 position-relative bg-linear-white" style="margin-top: -150px" id="newsMore">
        <a class="d-inline-flex align-items-center px-6 py-4 border border-black fs-3 hover-primary" onclick="newsMore(page)">
            more
            <i class="ms-4 fa-solid fa-chevron-right"></i>
        </a>
        </a>
    </div>
</div>

js


 $(".masonry-wrap").imagesLoaded(function() {
        $(".masonry-wrap").masonry({
            percentPosition: true,
        });
    });
    var page = 1;
    newsMore(page);
    function newsMore(p) {
        $.post('/public/newsList', {
            p,
            limit: 16,
            cate_id: cateId
        }, (res) => {
            if (res.data.last_page == 0) {
                $(".empty").show();
            } else {
                $(".empty").hide();
            }
            if (page > res.data.last_page) {
                $("#newsMore").hide();
                return false;
            }
            let news = '';
            let data = res.data.data
            for (let i = 0; i < data.length; i++) {
                news += `<div class="col">
                        <a data-caption="${data[i].title}" data-fancybox="a" href="//qn1.10soo.net${data[i].img_cover[0]}">
                            <div class="position-relative h-100 hover-scale-1_05-wrap scalex-wrap">
                                <div class="tran_0_5 w-100 h-100 position-absolute start-0 top-0 bg-danger hover-scale-1_05"></div>
                                <div class="w-100 position-relative hover-zoomin-wrap">
                                    <div class="overflow-hidden">
                                        <img class="w-100 position-relative hover-zoomin" src="//qn1.10soo.net${data[i].img_cover[0]}" alt="" />
                                    </div>
                                    <div class="p-6 bg-gray-2">
                                        <p class="fw-bold fs-1 mb-2 text-truncate" href="">${data[i].title}</p>
                                        <span class="fs--1 d-block text-truncate">${data[i].shape_size}</span>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>`;
            }
            $("#newsList").append(news);
            // 重新加载图片并重新布局
            $(".masonry-wrap").imagesLoaded(function() {
                $('.masonry-wrap').masonry('reloadItems'); // 重新加载图片
                $('.masonry-wrap').masonry('layout'); // 重新布局
            });
            page++;
            if (page > res.data.last_page) {
                $("#newsMore").hide();
            }
        })
    }