使用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″></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);
});
