Masonry 瀑布流插件使用

網址：http://masonry.desandro.com/

用於手機網頁

效果:

 

HTML:

    
                                <section id="con_2" class="mt-5">
                                    <!-- 用來緩衝圖片高度 -->
                                    <div class="c2-hide clearfix"><ul class="c2h-list"></ul></div>
                                    <ul class="c2-list" id="masonry">
                                        <li class="box">
                                            <div class="c2-w">
                                                <a href="#" class="c2-pic"><img src="static/images/320x80.jpg" alt=""></a>
                                                <div class="c2-word p-5">
                                                    簡單，快捷
                                                </div>
                                            </div>
                                        </li>
                                        <li class="box">
                                            <div class="c2-w">
                                                <a href="#" class="c2-pic"><img src="static/images/320x150.jpg" alt=""></a>
                                                <div class="c2-word p-5">
                                                    簡單，快捷
                                                </div>
                                            </div>
                                        </li>
                                        <li class="box">
                                            <div class="c2-w">
                                                <a href="#" class="c2-pic"><img src="static/images/320x400.jpg" alt=""></a>
                                                <div class="c2-word p-5">
                                                    簡單，快捷
                                                </div>
                                            </div>
                                        </li>
                                        <li class="box">
                                            <div class="c2-w">
                                                <a href="#" class="c2-pic"><img src="static/images/320x150.jpg" alt=""></a>
                                                <div class="c2-word p-5">
                                                    簡單，快捷
                                                </div>
                                            </div>
                                        </li>
                                        <li class="box">
                                            <div class="c2-w">
                                                <a href="#" class="c2-pic"><img src="static/images/320x400.jpg" alt=""></a>
                                                <div class="c2-word p-5">
                                                    簡單，快捷
                                                </div>
                                            </div>
                                        </li>
                                        <li class="box">
                                            <div class="c2-w">
                                                <a href="#" class="c2-pic"><img src="static/images/320x80.jpg" alt=""></a>
                                                <div class="c2-word p-5">
                                                    簡單，快捷
                                                </div>
                                            </div>
                                        </li>
                                    </ul>

                                    <div class="loading m-5">正在加載 ...</div>
                                </section>


                                <script src="static/plugin/masonry-docs.min.js"></script>

                        

CSS:

                            .c2-hide{
                                height:0px;
                                overflow: hidden;
                            }
                            .c2h-list{
                                height:10000px;
                            }
                            .c2-list li , .c2h-list li{
                                width:50%;
                                float:left;
                                margin-bottom:10px;
                            }
                            .c2-list .c2-w ,.c2h-list .c2h-w{
                                margin:0 5px;
                                box-shadow:0 0 1px #ddd;
                            }
                            .c2-list .c2-pic , .c2h-list li img{
                                width:100%;
                                font-size:0;
                                display: block;
                            }
                            .c2-list .c2-word{
                                font-size:12px;
                                line-height:14px;
                            }
                            .c2-list .c2-pic img{
                                width:100%;
                                vertical-align:top;
                                display: inline-block;
                            }
                            .loading{
                                height:30px;
                                line-height:30px;
                                text-align: center;
                                background:#fff;
                                font-size:12px;
                                display: none;
                            }
                        

JS:根據本身的實際開發來更改其 createNewElement 參數

                                /* 現有的元素瀑布流排序 */
                                var $container = $('#masonry');
                                $container.imagesLoaded(function() {
                                    $container.masonry({
                                        itemSelector: '.box',
                                        gutter: 0,
                                        isAnimated: true
                                    });
                                });


                                /* 新元素加載瀑布流 , 建立新的元素插入,必須得用js */
                                var appendNewElement = {
                                    timer : null ,
                                    createNewElement : function( url , img , title ) {
                                      var elem = document.createElement('li');
                                      elem.className="box";
                                      elem.innerHTML='<div class="c2-w"><a href="'+ url +'" class="c2-pic"><img src="'+ img +'" alt=""></a><div class="c2-word p-5">'+ title +'</div></div>';
                                      return elem;
                                    },
                                    hNewPic:function( img ){
                                        var hLi = document.createElement('li');
                                        hLi.innerHTML = '<div class="c2h-w"><img src="'+ img +'"></div>';
                                        return hLi;
                                    },
                                    //url 爲 ajax 接口 , loading 爲提示加載的DIV ，box 爲容器,添加新元素
                                    getData : function( url , loading , hBox , box ){
                                        $.ajax({
                                            url : url ,
                                            beforeSend:function(){
                                                loading.show();
                                            },
                                            success:function( data ){
                                            var item = eval('('+data+')');

                                                //若是數據沒有了就提示沒有了...
                                                if ( item.length <= 0 ) {
                                                    loading.show();
                                                    loading.html('沒有更多內容了...').css('background','#fff');
                                                    return;
                                                }

                                                //緩衝圖片高度
                                                var hNewElementArr = [];
                                                for( var i = 0 , len = item.length ; i < len ; i++ ){
                                                    hNewElementArr.push( appendNewElement.hNewPic(item[i].img ) );
                                                }
                                                hBox.append( hNewElementArr );

                                                //緩衝完圖片高度時候 , 使用定位
                                                appendNewElement.timer = setTimeout(function(){
                                                    var newElementArr = [];
                                                    for( var i = 0 , len = item.length ; i < len ; i++ ){
                                                        //把數據添加到一個數據裏而後，直接添加到容器中
                                                        newElementArr.push( appendNewElement.createNewElement( item[i].url , item[i].img ,  item[i].title ) );
                                                    }
                                                    //調用masonry插件進行排列
                                                    $container.imagesLoaded(function() {
                                                        $container.append( newElementArr ).masonry( 'appended', newElementArr );
                                                    });

                                                    //隱藏加載條...
                                                    loading.hide();

                                                    clearTimeout( appendNewElement.timer );
                                                },500);
                                            }
                                        });
                                    }
                                }



                                //下拉加載
                                $(window).scroll(function () {
                                    var scrollTop = $(this).scrollTop();
                                    var scrollHeight = $(document).height();
                                    var windowHeight = $(this).height();
                                    if ( scrollTop >= scrollHeight - windowHeight - 80 ) {
                                        appendNewElement.getData( 'static/js/data.js' , $('.loading') , $('.c2h-list') , $('.c2-list') );
                                    }
                                });
                        

數據 : 新建一個data.js 來模擬接口，注意路徑問題

[{url:'http://bing.com',img:'http://thumb105.hellorf.com/preview/234267106.jpg',title:'新的1'},{url:'http://bing.com',img:'http://thumb102.hellorf.com/preview/234417772.jpg',title:'新的2'},{url:'http://bing.com',img:'http://thumb106.hellorf.com/preview/146288921.jpg',title:'新的3'}]