JY案例一:瀑布流布局页面
作者：互联网
作者：田想兵 博客地址:http://www.cnblogs.com/tianxiangbing
在我的上一篇博文里，介绍了由我自主开发的javascript框架JY ，由于最近要整理BUG，还要写JY的API ,所以一直没空出Demo，纠结的API，我还是放弃吧，等以后谁好心帮我补充完整吧。
由于消息不灵通，最近才听到一个新名词“瀑布流”布局， 说现在很流行，作为一个走在时尚尖端的技术流前端，怎么能落伍呢？于是乎，百度百科了下，它是这样定义的：
瀑布流，又称瀑布流式布局。是目前比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。它有两个重点，一个是参差不齐，但不是完全的，而只是“等宽不等高”，每项的宽度是一样的，但高度不同；另一个重点是它是滚动式加载的。百度百科上还说，有三种实现方式：
本文案例请点击这里!1、传统多列浮动。代表网站 蘑菇街和哇哦
2、用CSS3实现
3、绝对定位。代表网站Pinterest
今天我们要实现的就是第一种方式，也是最简单最快的一种。效果图：
首先我们要选择一个好用的js框架，我这里因为是JY的案例，所以肯定一定是用的JY啦，^_^，所以应观众要求，我们就选用了JY，然后，就是准备用几列来表现了，好，又有观众说要用三列了。还有数据源，这里我们用json格式的文本。如下格式：
[{"url":"imgs/1.jpg","text":"javascript JY"},{"url":"imgs/2.jpg","text":"javascript JY"},{"url":"imgs/3.jpg","text":"javascript JY"},{"url":"imgs/2.jpg","text":"javascript JY"},{"url":"imgs/1.jpg","text":"javascript JY"},{"url":"imgs/1.jpg","text":"javascript JY"},{"url":"imgs/2.jpg","text":"javascript JY"},{"url":"imgs/3.jpg","text":"javascript JY"},{"url":"imgs/1.jpg","text":"javascript JY"},{"url":"imgs/2.jpg","text":"javascript JY"},{"url":"imgs/3.jpg","text":"javascript JY"},{"url":"imgs/3.jpg","text":"javascript JY"}]
就两属性，一个图片URL，一个文本说明，其它不多说。然后我们打算把它放到一个div容器里，分三个ul显示.
<div class="content waterfall_old clearfix"><ul>
<li><img src="imgs/1.jpg" alt="JY javascript"/><div>JY javascript</div></li>
<li><img src="imgs/1.jpg" alt="JY javascript"/><div>JY javascript</div></li>
<li><img src="imgs/1.jpg" alt="JY javascript"/><div>JY javascript</div></li>
</ul>
<ul>
<li><img src="imgs/2.jpg" alt="JY javascript"/><div>JY javascript</div></li>
<li><img src="imgs/1.jpg" alt="JY javascript"/><div>JY javascript</div></li>
<li><img src="imgs/1.jpg" alt="JY javascript"/><div>JY javascript</div></li>
</ul>
<ul>
<li><img src="imgs/3.jpg" alt="JY javascript"/><div>JY javascript</div></li>
<li><img src="imgs/2.jpg" alt="JY javascript"/><div>JY javascript</div></li>
<li><img src="imgs/1.jpg" alt="JY javascript"/><div>JY javascript</div></li>
<li><img src="imgs/1.jpg" alt="JY javascript"/><div>JY javascript</div></li>
</ul> </div>
然后，我们要把数据源填弃进这个div呢，问题就来了，该怎么填充呢，又有观众说了，一个里面放一个不就完了，这位观众说得很好，于是，我就把数据源分成了三组。准备，一个ul里放一个组的数据，代码如下：
var arr =[];var rl = r.length;//数据源长度
var len = rl %column ==0 ? parseInt(rl/column):parseInt(rl/column)+1;
for (var j=0;j<len ;j++ ){
var tmp = [];
for (var i =0,l=column; i< l && r.length ;i++ ){
tmp.push(r.shift());
}
arr.push(tmp); }
这样就按column分好组了，不复杂吧？！这个跟写分页时是一样的道理，又不完全一样。看不懂就多看几遍就懂了。这里没有JY代码呢！
分好组后，我们就把它强势插入到各个ul里吧。
for (var i =0,l=arr.length;i<l ;i++ ){for (var j = 0, ln=arr[i].length; j<ln ;j++ ){
var tmp = document.createElement("li");
tmp.innerHTML = '<img src="'+arr[i][j].url+'" alt="'+arr[i][j].text+'"/><div>'+arr[i][j].text+'</div>'
JY.query(".waterfall_old ul:eq("+j+")")[0].appendChild(tmp);
} }
ps:怎么博客园的编辑器，插入代码的时候，总是会有一行跑到外面来的，真是纠结
最后就是滚动加载了，这个应该会简单点吧，就是滚到差不多底部的时候，就再ajax请求一次数据源。
function dongtaiMore() {if (JY.byId("footer_wrap"))
if ( parseInt(document.documentElement.scrollTop) + JY.height(window) > JY.offset("footer_wrap").y) {
curPage++;
show(curPage);
}
}; JY.bind(window,"scroll",dongtaiMore);
这样，就算完事了，没有想象中那么复杂吧？！当然这只是一个简单的例子，你可以把它做得更完美些。因为现在是均匀分布在三列里的，这势必会造成最后某列参差不齐。但这种传统的做法，冒似也没有更好的优化方法，除非你知道每张图片的高度，那样就可以去计算了。这就是刚才说的绝对定位的方法。这留到下次再说吧！
今天就到这，本文案例请点击这里!如果你有任何的疑问都不要来问我，请重复阅读本文，或加入Q群70210212。
标签：JY,url,text,javascript,jpg,案例,imgs,页面 来源： https://blog.51cto.com/u_15255487/2860158