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

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

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

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

時(shí)間:2024-07-19來(lái)源:風(fēng)信官網(wǎng) 點(diǎn)擊: 798次
引入兩個(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>奔馳車(chē)最新優(yōu)惠信息</h3>
    <ul>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
    </ul>
  </div>
<div class="wfc">
    <h3>奔馳車(chē)最新優(yōu)惠信息</h3>
    <ul>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
        <li>奔馳車(chē)最新優(yōu)惠信息</li>
    </ul>
  </div>
    <div class="loading">
      
    </div>
    <div id="navigation">
        <a href="mydata.htm?page=1"></a> //這里放你的數據,這里是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 設置選項  
            itemSelector: '.wfc', //class 選擇器  
            columnWidth: 240, //一列的寬度 Integer  
            isAnimated: true, //使用jquery的布局變化  Boolean  
            animationOptions: {
                //jquery animate屬性 漸變效果  Object { queue: false, duration: 500 }  
            },
            gutterWidth: 20, //列的間隙 Integer  
            isFitWidth: false, // 適應寬度   Boolean  
            isResizableL: true, // 是否可調整大小 Boolean  
            isRTL: false, //使用從右到左的布局 Boolean  
        });
    });

下拉加載

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