Masonry 瀑布流插件

使用说明

Masonry是非常受欢迎的瀑布式排版插件,具体用法见官网。本框架所使用的版本是v4.2.2,未做任何修改。

为了避免item没有加载完成就渲染了位置,所以推荐使用imagesLoaded插件,具体用法见Github。组合使用方法见如下实例:

  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • <script src="https://src.axui.cn/v2.0/dist/plugins/masonry/masonry.min.js"></script>
    <script src="https://src.axui.cn/v2.0/dist/plugins/masonry/imagesloaded.min.js"></script>
    <script type='text/javascript'>
    var masonry01 = document.querySelector('#masonry01');
                imagesLoaded(masonry01, function () {
                    new Masonry(masonry01, {
                        itemSelector: 'li',
                        percentPosition: true
                    });
                });
    </script>
                            
  • <div class="ax-grid">
    <ul class="ax-grid-inner"  id="masonry01">
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:300px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:110px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:180px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:220px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:150px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:300px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:110px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:180px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:220px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:150px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:190px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:80px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:170px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:190px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:80px;">1</section></li>
    <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:170px;">1</section></li>
    <div class="ax-clear"></div>
    </ul>
    </div>
                            

无限加载

配合infinite.js插件,可实现无限滚动效果。无限滚动插件的使用方法见infinite。由于infinite插件本身已经集成了imagesLoaded,所以可以不再引用imagesLoaded。

  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1
  • 1

已经到最后了

没有更多页面加载

  • <script src='dist/plugins/infinite-scroll/infinite-scroll.min.js'></script>
    <script src="https://src.axui.cn/v2.0/dist/plugins/masonry/masonry.min.js"></script>
    <script type='text/javascript'>
    var masonry02 = document.querySelector('#masonry02');
    var instance02 = new Masonry(masonry02, {
        itemSelector: 'li',
        percentPosition: true
    });
    
    var infinite02 = new InfiniteScroll(masonry02, {
        path: 'examples/pages/masonry{{#}}.html',
        append: 'li',
        button: '#more',
        scrollThreshold: false,
        history: false,
        status: '.ax-infinite-status',
        outlayer: instance02,
    });
    </script>
                            
  •                                     <div class="ax-grid">
                                        <ul class="ax-grid-inner"  id="masonry02">
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:300px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:110px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:180px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:220px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:150px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:300px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:110px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:180px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:220px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:150px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:190px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:80px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:170px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:190px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:260px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:80px;">1</section></li>
                                            <li class="ax-grid-block ax-col-6"><section class="demo-section-border" style="height:170px;">1</section></li>
                                        </ul>
                                    </div>
                                    <div class="ax-infinite-status">
                                        <div class="loader-ellips infinite-scroll-request">
                                            <span class="ax-loading"><i></i></span>
                                        </div>
                                        <p class="infinite-scroll-last">已经到最后了</p>
                                        <p class="infinite-scroll-error">没有更多页面加载</p>
                                    </div>
                                    <p align="center"><button class="ax-btn ax-btn-primary ax-btn-longer" id="more">查看更多</button></p>