消息关闭
    暂无新消息!
一个很不错的瀑布流代码,请问下怎样可以修改他通过 ajax+json 的方法来读取数据,并且控制读取3页后停止呢?

文件地址: https://github.com/leozdgao/responsive_waterfall

谢谢大神出手!

2个回答

︿ 0

<!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>      
︿ 0
自己用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解码读取二维码信息