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

文章目录

思路

  • 直接使用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();
            }
        })
    }

  • 5
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个基于 jQuery瀑布流和 Mustache 模板的下拉加载示例: HTML 结构: ```html <div id="waterfall"> <div class="waterfall-item"> <img src="image1.jpg" alt=""> <h3>Image Title 1</h3> </div> <div class="waterfall-item"> <img src="image2.jpg" alt=""> <h3>Image Title 2</h3> </div> <!-- ... --> </div> <div id="load-more"> <button>Load More</button> </div> <!-- Mustache 模板 --> <script id="template" type="x-tmpl-mustache"> {{#images}} <div class="waterfall-item"> <img src="{{src}}" alt="{{alt}}"> <h3>{{title}}</h3> </div> {{/images}} </script> ``` CSS 样式: ```css #waterfall { display: flex; flex-wrap: wrap; justify-content: space-between; } .waterfall-item { width: 30%; margin-bottom: 20px; } .waterfall-item img { display: block; width: 100%; } .waterfall-item h3 { margin-top: 10px; font-size: 16px; text-align: center; } #load-more { text-align: center; margin-top: 20px; } ``` JavaScript 代码: ```javascript $(function() { var page = 1; // 当前页数 var perPage = 10; // 每页显示的数量 var isLoading = false; // 是否正在加载数据 var template = $('#template').html(); // Mustache 模板 var $waterfall = $('#waterfall'); // 瀑布流容器 var $loadMore = $('#load-more'); // 加载更多按钮 // 加载数据函数 function loadData() { if (isLoading) return; // 如果正在加载数据,则退出 isLoading = true; // 设置正在加载数据 $.ajax({ url: 'data.json', type: 'get', data: { page: page, perPage: perPage }, dataType: 'json', success: function(res) { if (res.length < perPage) { $loadMore.hide(); // 如果数据不足一页,则隐藏“加载更多”按钮 } var html = Mustache.render(template, { images: res }); $waterfall.append(html).imagesLoaded(function() { $waterfall.masonry('appended', $waterfall.find('.waterfall-item')); }); page++; // 加载下一页数据 isLoading = false; // 设置加载完毕 } }); } // 初始化瀑布流 $waterfall.masonry({ itemSelector: '.waterfall-item', columnWidth: '.waterfall-item', gutter: 20 }); // 绑定“加载更多”按钮事件 $loadMore.on('click', function() { loadData(); }); // 初始化时加载第一页数据 loadData(); }); ``` 其中,`data.json` 是一个返回 JSON 格式数据的 URL,必须按照传入的 `page` 和 `perPage` 参数返回对应数量的数据。`Mustache.render` 方法用于将数据渲染为 HTML,`imagesLoaded` 插件用于等待所有图片加载完毕后再执行瀑布流布局,`masonry` 插件用于实现瀑布流布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值