---- AI试用 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

实现瀑布流下拉加载(infinite-scroll+masonry)

javascript 蚂蚁 7854℃ 0评论

超简单的教程哦,如果要研究可以去官网看看!

引入两个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() {
		alert('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);
});

转载请注明:有爱前端 » 实现瀑布流下拉加载(infinite-scroll+masonry)

喜欢 (7)or分享 (0)

(8)个小伙伴在吐槽
  1. 赞 or 分享。。。O(∩_∩)O哈哈~
    啦啦啦2015-10-07 16:43
  2. 等待图片加载完成 $('img').load(function () { console.log('image load successful'); });
    朽木2015-11-26 16:22
  3. loading: { msgText: "加载中...", finishedMsg: '没有新数据了...', selector: '.loading', // 显示loading信息的div img:'img/loading.gif' }
    朽木2015-11-26 16:38
  4. 过来踩踩
    陈小予2015-11-26 16:59
  5. 等待图片加载完成 使用jquery处理img元素的load事件触发不了的问题$("img").one('load', function() { // do stuff }).each(function() { if(this.complete) $(this).load(); });
    朽木2015-11-26 17:10
  6. 这个貌似好用点 http://wlog.cn/waterfall/index-zh.html
    一个好人2016-01-20 15:21
  7. http://www.jb51.net/article/74117.htm
    蚂蚁2017-04-11 17:28