久久久久精品国产,丰满少妇粗大猛烈进高清播放,久久久97,在线18禁

<wbr id="x3zex"><nav id="x3zex"><em id="x3zex"></em></nav></wbr>

        <s id="x3zex"></s>
        1. <ruby id="x3zex"><nav id="x3zex"><acronym id="x3zex"></acronym></nav></ruby>
          <font id="x3zex"><noscript id="x3zex"></noscript></font>
          0712-2888027 189-8648-0214
          微信公眾號(hào)

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

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

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

          時(shí)間:2016-06-17來源:風(fēng)信官網(wǎng) 點(diǎn)擊: 907次
          引入兩個(gè)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è)置選項(xiàng)  
                      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)航的選擇器,會(huì)被隱藏   
                  nextSelector: "#navigation a", //包含下一頁鏈接的選擇器   
                  itemSelector: ".wfc", //你將要取回的選項(xiàng)(內(nèi)容塊)   
                  debug: true, //啟用調(diào)試信息   
                  animate: true, //當(dāng)有新數(shù)據(jù)加載進(jìn)來的時(shí)候,頁面是否有動(dòng)畫效果,默認(rèn)沒有   
                  extraScrollPx: 150, //滾動(dòng)條距離底部多少像素的時(shí)候開始加載,默認(rèn)150   
                  bufferPx: 60, //載入信息的顯示時(shí)間,時(shí)間越大,載入信息顯示時(shí)間越短   
                  errorCallback: function() {
                      a lert('error');
                  }, //當(dāng)出錯(cuò)的時(shí)候,比如404頁面的時(shí)候執(zhí)行的函數(shù)   
                  localMode: true, //是否允許載入具有相同函數(shù)的頁面,默認(rèn)為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)容
          熱點(diǎn)內(nèi)容
          展開