自己用ajax请求服务器获取数据组合成瀑布流需要的块对象，调用addBox加进去就行了 Waterfall.prototype.addBox = function(elem) { // push if new box if(this.boxes.indexOf(elem) < 0) this.boxes.push(elem); var columnIndex = this.getMinHeightIndex(); if(columnIndex > -1) { var column = this.columns[columnIndex]; column.appendChild(elem); } }; 次数那不是自己用个全局变量控制默认3，ajax成功请求一次就-1，为0就不不发送ajax请求了，下载的压缩包里面也有实例了，滚动加载的 app.js改成这样 var loadNum = 3; window.onscroll = function () { if (loadNum == 0) return window.onscroll=null; var i = waterfall.getHighestIndex(); if (i > -1) { // get last box of the column var lastBox = Array.prototype.slice.call(waterfall.columns[i].children, -1)[0]; if(checkSlide(lastBox)) { var count = 5; //这里js添加5个，你改成你的ajax代码返回JSON数组[{img:'',head:'head',content:'content'}....]，遍历下传入boxHandle作为参数，自己改下boxHandle依据传入的参数设置节点内容就行了 while (count--) waterfall.addBox(boxHandle()); loadNum--; } } };推荐学习资料 asp网站使用utf-8编码注意事项 javascript解码读取二维码信息
Waterfall.prototype.addBox = function(elem) {
// push if new box
if(this.boxes.indexOf(elem) < 0) this.boxes.push(elem); var columnIndex = this.getMinHeightIndex();
if(columnIndex > -1) {
var column = this.columns[columnIndex];
column.appendChild(elem);
}
};
次数那不是自己用个全局变量控制默认3，ajax成功请求一次就-1，为0就不不发送ajax请求了，下载的压缩包里面也有实例了，滚动加载的
app.js改成这样
var loadNum = 3;
window.onscroll = function () { if (loadNum == 0) return window.onscroll=null;
var i = waterfall.getHighestIndex();
if (i > -1) {
// get last box of the column
var lastBox = Array.prototype.slice.call(waterfall.columns[i].children, -1)[0];
if(checkSlide(lastBox)) {
var count = 5;
//这里js添加5个，你改成你的ajax代码返回JSON数组[{img:'',head:'head',content:'content'}....]，遍历下传入boxHandle作为参数，自己改下boxHandle依据传入的参数设置节点内容就行了
while (count--) waterfall.addBox(boxHandle());
loadNum--;
}
}
};推荐学习资料
asp网站使用utf-8编码注意事项
javascript解码读取二维码信息
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="responsive_waterfall.js"></script>
<link rel="stylesheet" href="wf-style.css">
<style>
/* reset */
* { box-sizing: border-box; margin: 0; padding: 0; } body {
font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 14px;
color: #333;
} a {
text-decoration: none;
cursor: pointer;
color: #419aff;
}
a:hover { color: #41ccff; } /* customize button */
.btn {
padding: 6px 12px;
border: 1px solid transparent;
border-radius: 4px;
cursor: pointer;
}
.btn:active {
background-image: none;
outline: 1;
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}
.btn.btn-primary {
background-color: #fff;
border-color: #ccc;
}
.btn.btn-primary:hover {
background-color: #e6e6e6;
} /* header */
.header {
background: #eee;
padding-top: 50px;
padding-bottom: 20px;
text-align: center;
}
.header p {
margin: 12px 0;
}
.header .btn-group {
margin: 8px 0;
} /* style for waterfall grid */
.wf-container {
margin: 0 auto;
}
.wf-container:before,.wf-container:after {
content: '';
display: table;
}
.wf-container:after {
clear: both;
}
.wf-box {
margin: 10px;
}
.wf-box img {
display: block;
width: 100%;
}
.wf-box .content {
border: 1px solid #ccc;
border-top-width: 0;
padding: 5px 8px;
}
.wf-column {
float: left;
} @media screen and (min-width: 768px) {
.wf-container { width: 750px; }
}
@media screen and (min-width: 992px) {
.wf-container { width: 970px; }
}
@media screen and (min-width: 1200px) {
.wf-container { width: 1170px; }
}
</style>
</head>
<body>
<section>
<div class="wf-container">
</div>
<section>
<script type="text/javascript">
var waterfall = new Waterfall({ minBoxWidth: 200 });
var handler = newNode();
{ //ajax请求成功后，调用addBox方法添加组合好的元素；假定此{}中的代码处于ajax success中
for(var i=0;i<15;i++){
waterfall.addBox(handler());
}
//这里一次性添加多个，你会发现顺序有问题(如果添加时图片未加载好，高度计算有问题)
//有三个办法，一个办法就是不要一次性加载，一次只加载一个图片，等图片加载完成后再显示下一张；
//办法二就是预先设定好图片的高度
//另外一个办法就是他源码里面的方法，进行重新计算布局
var images = waterfall.container.querySelectorAll('img'), that = waterfall;
var clr;
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onload = function() {
if(clr) clearTimeout(clr); clr = setTimeout(function() {
that.compose(true);
}, 500);
}
}
}
function newNode() {
var size = ['660x250', '300x400', '350x500', '200x320', '300x300'];
var color = [ 'E97452', '4C6EB4', '449F93', 'D25064', 'E59649' ];
var i = 0; return function() {
var box = document.createElement('div');
box.className = 'wf-box';
var image = document.createElement('img');
image.src = "http://placehold.it/" + size[i] + '/' + color[i] + '/fff';
box.appendChild(image);
var content = document.createElement('div');
content.className = 'content';
var title = document.createElement('h3');
title.appendChild(document.createTextNode('Heading'));
content.appendChild(title);
var p = document.createElement('p');
p.appendChild(document.createTextNode('Content here'));
content.appendChild(p);
box.appendChild(content); if(++i === size.length) i = 0; return box;
};
}
</script>
</body>
</html>