JY案例一:瀑布流布局页面

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。