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

用最简易的方式实现瀑布流布局,使用JY库,将是你不二的选择!瀑布流,又称瀑布流式布局。是目前比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。 JY案例一:瀑布流布局页面

作者:田想兵 博客地址:http://www.cnblogs.com/tianxiangbing

在我的上一篇博文里,介绍了由我自主开发的javascript框架JY ,由于最近要整理BUG,还要写JY的API ,所以一直没空出Demo,纠结的API,我还是放弃吧,等以后谁好心帮我补充完整吧。

由于消息不灵通,最近才听到一个新名词“瀑布流”布局, 说现在很流行,作为一个走在时尚尖端的技术流前端,怎么能落伍呢?于是乎,百度百科了下,它是这样定义的:

瀑布流,又称瀑布流式布局。是目前比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部。 

它有两个重点,一个是参差不齐,但不是完全的,而只是“等宽不等高”,每项的宽度是一样的,但高度不同;另一个重点是它是滚动式加载的。百度百科上还说,有三种实现方式:

本文案例请点击这里!  
1、传统多列浮动。代表网站 蘑菇街和哇哦
2、用CSS3实现

3、绝对定位。代表网站Pinterest 

今天我们要实现的就是第一种方式,也是最简单最快的一种。效果图:

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

首先我们要选择一个好用的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。 
 

 

上一篇:生活这么无聊,保存点小姐姐的图片来点调料吧


下一篇:微信小程序上传图片及上传到上传到七牛云