zoukankan      html  css  js  c++  java
  • 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'}]
  • 相关阅读:
    在请求中使用XML Publisher生成文件报错
    Oracle Sourcing Implementation and Administration Guide(转)
    API To Import Negotiations(转)
    使用POI动态更新导出的EXCEL模板中的列
    使用POI设置导出的EXCEL锁定指定的单元格
    QML获取随机颜色
    Access导出excel
    Component
    QML中打印
    Qt Quick Dialogs
  • 原文地址:https://www.cnblogs.com/zion0707/p/4478201.html
Copyright © 2011-2022 走看看