Masonry 瀑布流插件

使用说明 PLUGIN

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

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

  • 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/src/plugins/masonry/masonry.min.js"></script>
    <script src="https://src.axui.cn/src/plugins/masonry/imagesloaded.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            var  masonry01 = $('#masonry01');
            masonry01.imagesLoaded( function (){
                masonry01.masonry({
                    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>
                            

无限加载 PLUGIN

配合infinite.js插件,可实现无限滚动效果。无限滚动插件的使用方法见infinite

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

已经到最后了

没有更多页面加载

  • <script src='src/plugins/infinite-scroll/infinite-scroll.min.js'></script>
    <script src="https://src.axui.cn/src/plugins/masonry/masonry.min.js"></script>
    <script src="https://src.axui.cn/src/plugins/masonry/imagesloaded.min.js"></script>
    <script type='text/javascript'>
        $(document).ready(function () {
            var  $masonry02 = $('#masonry02');
            $masonry02.imagesLoaded( function (){
                $masonry02.masonry({
                    itemSelector: 'li',
                    percentPosition: true
                });
            });
            var $infinite02 = $masonry02.infiniteScroll({
                path: 'examples/pages/masonry{{#}}.html',
                append: 'li',
                button: '#more',
                scrollThreshold: false,
                history: false,
                status: '.ax-infinite-status',
                });
             $infinite02.on( 'append.infiniteScroll', function( event, response, path, items ) {
                 var $newElems = $( items ).hide();
                 $newElems.imagesLoaded(function(){
                     $newElems.fadeIn(200);
                     $masonry02.masonry( 'appended', $newElems, true );
                 });
            });
        });
    </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>