使用infinite-scroll+masonry实现瀑布流下拉加载数据

使用infinite-scroll+masonry实现瀑布流下拉加载数据

引入两个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>奔驰车优惠信息</h3>

<ul>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

</ul>

</div>

<div class=”wfc”>

<h3>奔驰车优惠信息</h3>

<ul>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

<li>奔驰车优惠信息</li>

</ul>

</div>

<div class=”loading”>

</div>

<div id=”navigation”>

<a href=”mydata.htm?page=1″ rel=”external nofollow” ></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”, //导航的选择器，会被隐藏

nextSelector: “#navigation a”, //包含下一页链接的选择器

itemSelector: “.wfc”, //你将要取回的选项(内容块)

debug: true, //启用调试信息

animate: true, //当有新数据加载进来的时候，页面是否有动画效果，默认没有

extraScrollPx: 150, //滚动条距离底部多少像素的时候开始加载，默认150

bufferPx: 60, //载入信息的显示时间，时间越大，载入信息显示时间越短

errorCallback: function() {

a lert(‘error’);

}, //当出错的时候，比如404页面的时候执行的函数

localMode: true, //是否允许载入具有相同函数的页面，默认为false

dataType: ‘html’, //可以是json

//                template: function(data) {

//                    //data表示服务端返回的json格式数据，这里需要把data转换成瀑布流块的html格式，然后返回给回到函数

//                    return ”;

//                },

loading: {

msgText: “加载中…”,

finishedMsg: ‘没有新数据了…’,

selector: ‘.loading’ // 显示loading信息的div

}

}, function(newElems) {

//程序执行完的回调函数

var $newElems = $(newElems);

$(‘#masonry’).masonry(‘appended’, $newElems);

});