Ruby's Louvre

每天学习一点点算法

导航

< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

统计

javascript 瀑布流

http://www.hemin.cn/test/

现在图片网与商城流行一种叫“瀑布流”的布局,我们公司也不小心得了“流行性感冒”,要搞这个。于是我就写了一个,现在再用我的框架mass重写一下,发布出来,顺便宣传一下我的框架。

瀑布流其实没什么东西,就是列布局与无限拖的结合。由于要支持IE6就没有CSS3,直接对列进行绝对定位。列就是一个DIV。然后就是列中每个板块的添加问题,我管它为砖头。每添加一块砖头前,比较一下哪列最短,就往哪里塞。最后就是无限拖,太easy了。加之,我的框架对样式,事件等设置非常简单,比jQuery更方便。

下面就是源码,用到了并行加载技术,预设时加载了random,ready,css,event这几个模块,它们就会自行加载其依赖模块了。

require("ready,random,css,event",function($, random){
    //容器的CSS表达式,列数,每列的宽度
    var Waterfall = function(expr, col, colWidth){
        //构建整体轮廓
        var container = this.container = $(expr);
        var pw = container.width();//容器的宽
        var gw = (pw - col * colWidth)/(col-1);//列间距离
        this.colWidth = colWidth;
        this.cols = [];
        for(var i = 0; i < col ; i++){//随机生成列
            this.cols[i] = $("<div class='waterfall' />").css({
                position: "absolute",
                top: 0,
                left: (colWidth + gw) * i,
                width: colWidth,
                backgroundColor: random.hex()
            }).appendTo(container);
        }
    }
    Waterfall.prototype = {
        //添加板块
        addBlocks : function(){
            for(var i = 0; i < 40; i++){//随机生成40个板砖
                $("<div class='waterfall_block' />").css({
                    margin: 5,
                    width: this.colWidth - 10 ,
                    height: random.num(80, 300),
                    backgroundColor: random.hex()
                }).appendTo( this.whichCol() );
            }
        },
        //计算出最短的栏栅
        whichCol:function(el, ret, h){
            for(var i = 0, shortest = 0; el = this.cols[i]; i++){
                h = el.height();
                if(i == 0){
                    shortest = h;
                    ret = el;
                }
                if(h < shortest ){
                    shortest = h;
                    ret = el;
                }
            }
            return ret;
        }
    };
 
    var waterfall = new Waterfall("body",4,300)
    waterfall.addBlocks();
    $(window).scroll(function(){
        var clientHeight = $(window).height(),
        scrollTop = $(window).scrollTop(),
        scrollHeight = $(document).height();
        if(clientHeight + scrollTop >=  scrollHeight ){
            waterfall.addBlocks();
        }
    })
})

源码放于github中。

IE下如果报错,请它刷新页面

最后附上微博上对它的评论:Pinterest创造的瀑布流样式,有几个预设前提:1、图片极重要,文字不重要;2、用户浏览无明确目的,对复杂的索引无依赖性;3、图片整体美观度较高。因此恰恰适合Pinterest这样的“好图挖掘与收藏网站”。最近几个月国内跟风瀑布流,也太盲目了些。

如果您觉得此文有帮助,可以打赏点钱给我支付宝1669866773@qq.com ,或扫描二维码

posted on   司徒正美  阅读(13130)  评论(14编辑  收藏  举报

编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
历史上的今天:
2010-02-06 とある要素以下にある textNode で一致する textNode を XPath で高速に取り出す
2010-02-06 一些JSON相关的函数
点击右上角即可分享
微信分享提示