首页
核心
实例
资源
关于
v1.0

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
JS HTML 
  • <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>
                        
  •                                             <ul class="ax-grid ax-grid-4" id="masonry01">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:300px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:110px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:180px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:220px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:150px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:300px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:110px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:180px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:220px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:150px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:190px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:80px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:170px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:190px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:80px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:170px;">1</section>
                                            </li class="ax-col-6">
                                        </ul>

无限加载

配合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

已经到最后了

没有更多页面加载

JS HTML 
  • <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>
                        
  •                                             <ul class="ax-grid ax-grid-4" id="masonry02">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:300px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:110px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:180px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:220px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:150px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:300px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:110px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:180px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:220px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:150px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:190px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:80px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:170px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:190px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:260px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:80px;">1</section>
                                            </li class="ax-col-6">
                                            <li class="ax-col-6">
                                                <section class="demo-section-border" style="height:170px;">1</section>
                                            </li class="ax-col-6">
                                        </ul>
                                <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>