v1.0核心
v1.0实例
v2.0

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
JS HTML 
  • <script src="https://src.axui.cn/v1.0/src/plugins/masonry/masonry.min.js"></script>
<script src="https://src.axui.cn/v1.0/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

已经到最后了

没有更多页面加载

JS HTML 
  • <script src='src/plugins/infinite-scroll/infinite-scroll.min.js'></script>
<script src="https://src.axui.cn/v1.0/src/plugins/masonry/masonry.min.js"></script>
<script src="https://src.axui.cn/v1.0/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>