javascript 瀑布流
现在图片网与商城流行一种叫“瀑布流”的布局,我们公司也不小心得了“流行性感冒”,要搞这个。于是我就写了一个,现在再用我的框架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 ,或扫描二维码


机器瞎学/数据掩埋/模式混淆/人工智障/深度遗忘/神经掉线/计算机幻觉/专注单身二十五年
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题: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相关的函数