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

引入两个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）