国产免费又爽又刺激在线观看,免费一级毛片在线播放放视频,最近日本免费观看高清视频,亚洲无码视频观看

<ruby id="cmmwe"></ruby>

  • <var id="cmmwe"></var>
    <b id="cmmwe"></b>
    <source id="cmmwe"><track id="cmmwe"><ins id="cmmwe"></ins></track></source>

      1. 0712-2888027 189-8648-0214
        微信公眾號

        孝感風(fēng)信網(wǎng)絡(luò)科技有限公司微信公眾號

        當前位置:主頁 > 技術(shù)支持 > Javascript/JQuery > 實現(xiàn)瀑布流下拉加載(infinite-scroll+masonry)

        實現(xiàn)瀑布流下拉加載(infinite-scroll+masonry)

        時間:2016-06-17來源:風(fēng)信官網(wǎng) 點擊: 907次
        引入兩個js
        <script src="js/masonry.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery.infinitescroll.js" type="text/javascript" charset="utf-8"></script>

        HTML

        <div id="masonry" class="container">
        <div class="wfc">
             <h3>奔馳車最新優(yōu)惠信息</h3>
            <ul>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
            </ul>
          </div>
        <div class="wfc">
            <h3>奔馳車最新優(yōu)惠信息</h3>
            <ul>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
                <li>奔馳車最新優(yōu)惠信息</li>
            </ul>
          </div>
            <div class="loading">
              
            </div>
            <div id="navigation">
                <a href="mydata.htm?page=1"></a> //這里放你的數(shù)據(jù),這里是htm格式的,你可以換成json
            </div>
        </div>

        CSS

            .wfc {
              margin-bottom: 20px;
              float: left;
              width: 220px;
              border: 1px solid #ddd;
              }
            .loading {
              border: none;
              border-color: rgba(34, 25, 25, 0.14);
              border-image: none;
              border-style: double;
              border-width: 3px 0 0;
              /*display: none;*/
              font-weight: 700;
              margin-bottom: 15px;
              padding: 15px 0;
              text-align: center;
              position: fixed;
              bottom: 10px;
              left: 50%;
            }

        瀑布流

            $(function() {
                $('#masonry').masonry({
                    // options 設(shè)置選項  
                    itemSelector: '.wfc', //class 選擇器  
                    columnWidth: 240, //一列的寬度 Integer  
                    isAnimated: true, //使用jquery的布局變化  Boolean  
                    animationOptions: {
                        //jquery animate屬性 漸變效果  Object { queue: false, duration: 500 }  
                    },
                    gutterWidth: 20, //列的間隙 Integer  
                    isFitWidth: false, // 適應(yīng)寬度   Boolean  
                    isResizableL: true, // 是否可調(diào)整大小 Boolean  
                    isRTL: false, //使用從右到左的布局 Boolean  
                });
            });

        下拉加載

            $('#masonry').infinitescroll({
                navSelector: "#navigation", //導(dǎo)航的選擇器,會被隱藏   
                nextSelector: "#navigation a", //包含下一頁鏈接的選擇器   
                itemSelector: ".wfc", //你將要取回的選項(內(nèi)容塊)   
                debug: true, //啟用調(diào)試信息   
                animate: true, //當有新數(shù)據(jù)加載進來的時候,頁面是否有動畫效果,默認沒有   
                extraScrollPx: 150, //滾動條距離底部多少像素的時候開始加載,默認150   
                bufferPx: 60, //載入信息的顯示時間,時間越大,載入信息顯示時間越短   
                errorCallback: function() {
                    a lert('error');
                }, //當出錯的時候,比如404頁面的時候執(zhí)行的函數(shù)   
                localMode: true, //是否允許載入具有相同函數(shù)的頁面,默認為false   
                dataType: 'html', //可以是json   
                //                template: function(data) {   
                //                    //data表示服務(wù)端返回的json格式數(shù)據(jù),這里需要把data轉(zhuǎn)換成瀑布流塊的html格式,然后返回給回到函數(shù)   
                //                    return '';   
                //                },   
                loading: {
                    msgText: "加載中...",
                    finishedMsg: '沒有新數(shù)據(jù)了...',
                    selector: '.loading' // 顯示loading信息的div   
                }
            }, function(newElems) {
                //程序執(zhí)行完的回調(diào)函數(shù)   
                var $newElems = $(newElems);
                $('#masonry').masonry('appended', $newElems);
            });
        熱門關(guān)鍵詞: 瀑布流 下拉加載 infinite-scroll mason
        欄目列表
        推薦內(nèi)容
        熱點內(nèi)容
        展開