堆糖瀑布流完整解决方案(jQuery)

　　2010年堆糖创办以来，网站界面经历过3-5次重大改版，logo也曾更换过两次，早期蓝红相间三个圈的logo恐怕很少有人记得了。与此同时，前端 js 框架也在默默的更新换代。最早堆糖上线时，js 采用的YUI2.0 框架，这也是传承自上一家公司。上线后空闲下来，经历3个月的时间，逐步的切换到jQuery1.3.2(后来升级版本到1.6.1)。估摸着是在2011年3月完成切换工作，那个时候瀑布流还没有兴起，堆糖网核心页面仍然是微博模式。3月底，一场基于jQuery的瀑布流开发工作由此开始。不记得开发经历了多久，只记得当时开发完上线，发现各种网站的瀑布流争相出炉，好不热闹。时至今日，堆糖的核心浏览模式仍旧是瀑布流。

　　说到瀑布流，不得不提一下pinterst.com 这一瀑布流的始祖网站，以及masonry.js 这一核心技术支持，相信大多数开发瀑布流的前端攻城狮们都有研究过masonry.js 源代码，早期pinterst.com 的js 里就有它的影子。但对于一个纯粹的瀑布流页面，masonry.js 某些自动排版的功能显得多余，代码也过于繁琐，直到最后也只能从头写过。2011年中期，开源社区瀑布流组件已经应运而生，记得淘宝就已经由玉伯出品了。2011年底我也想过分享堆糖的瀑布流，但种种原因放弃了。其中一个原因是逻辑过于复杂，代码过于凌乱。堆糖的瀑布流大不同于inifinite 无限加载类型的瀑布流，适可而止的翻页机制才是重点，这一翻页机制全部由js 实现，而不是简单的刷新页面，这一点不同就让我难以起手整理。加上年底，归家心切，就推迟了。

 

　　结果这一推迟，就快两年了。要不是这次Boss Jodyssey威胁我要分享前端相关的技术，这一推迟还不知道要延续多久。既然是要分享，我理解就是卖了，就卖得彻底一点，堆糖瀑布流前端整套解决方案今日和盘托出，拱手相赠，那边Laurence大哥可能会教导，“这是公司的核心资产，怎么能贱卖...” 我是想，待到人老珠黄了再卖，连吆喝声都赚不到就亏得没底了。虽说瀑布流体系的风头早已不如从前，但也还残存点商业价值，不知道现如今猪八戒网上仿堆糖还值多少钱，有识货的码农借去揽了生意，记得给点分成哈，联系邮箱： hr@duitang.com 。

 

下面可都是些干货了。

 

堆糖瀑布流(Woo) jQuery完整版，涵盖以下特点：

o) 数据配置灵活，可在html 里直接放置瀑布流单元(一般只放第一子页)。
o) 数据格式灵活，可处理josn格式的数据(推荐)，也可兼容html字符串格式的数据。
o) 独立的数据控制文件 masnunit.js。
o) 同一页面上通过tab 切换植入多个不同类型的瀑布流，切换无刷新。
o) 不同于infinite 瀑布流，可进行翻页控制。子页数量设置无限大时等同于infinite。
o) 至页底时，会预加载下一页第一子页内容。
o) 实现hash 无刷新翻页，并兼容浏览器的前进后退功能。
o) 根据当前环境自动控制瀑布流列数，可自适应屏幕宽度，也可通过 data-domwidth 设置固定宽度。
o) 可采用 sink 模式，在瀑布流左侧或右侧第一列嵌入外部区块。
o) 可配置直接向前(后)翻页的小翻页器。
o) 自带回到顶部功能，并能控制距离顶部的准确位置，准确说是回到预埋锚点的位置(可设置偏移量)。
o) 强大的 window resize 自动重绘功能(IE下不建议打开此功能)。
o) 可通过配置参数激活特殊列(只能是最左或最右列)，此列宽度可不同于其它列。
o) 灵活的参数设置，比如：子页数量、子页内单元数量、瀑布流单元宽度和间距 等等等等。

 

一些保留命名 >>

co(n)                        单元块所在列数对应的className
sc(n)                        单元块所在屏数对应的className
woo-(*)                    Woo内部特殊用途的className or id
woo-form-(*)            form 表单的 id，用作请求地址url的拼装
srcd                         单元块内的图片src 属性的替代，图片延迟加载功能使用

 

一些依赖 >>

依赖 browser.js 用于兼容1.10 及以上jQuery 版本的$.browser 对象
依赖 history.js 监控hashchange 事件
依赖(非必需) template.min.js 组装html 字符串，详见 masnunit.js
依赖 tabswitch.js 用于不同瀑布流的切换

一些使用方法 >>

1) 在main.html 代码底部每一个<form >对应一个瀑布流的数据请求地址。
2) 如页面上只需要一个瀑布流，请相应的删除掉多余的form 表单和 .woo-swa .woo-swb节点。
3) 如不给定 .woo-masned 节点的宽度，会自动适应屏幕宽度。专辑类型示例中给定了 1000px 的宽度。
4) .woo-pcont 节点内可预先放好若干个单元(个数没有限制)，预先放置的会被当做第一子页数据，后面会直接从第二子页开始。
5) 一个页面可以有多个瀑布流，不同瀑布流的配置可以差异化。通过在各自.woo-pcont节点上设置 data- 属性，例如：data-subpagenum data-unitsnum data-sink来覆盖全局配置。
6) .woo-pcont节点上目前支持的data- 配置有：data-domwidth data-subpagenum data-unitsnum data-totalunits data-wootemp data-sink data-sinkheight data-sinkright。
7) data-wootemp 取值为从0开始的整数，对应 masnunit.js 文件里定义的不同类型瀑布流。
8) 示例使用了DEBUG 并分别在 main.html 和 masnunit.js 里给定了模拟数据。
9) 可在 masnunit.js 里编写不同种类的瀑布流，示例给出了两种：图片类型和专辑类型。
10) 请仔细研究 masnunit.js。

 

 初始化方法 >>

<script>
$(function (){

    // 可自行修改代码添加瀑布流的三个控制键 gonext gopre gotop
    $('<div id="mycontrols"><a id="gonext" href="javascript:;" title="下一页"></a><a href="javascript:;" id="gotop"></a><a id="gopre" href="javascript:;"  title="上一页"></a></div>').appendTo('body');

    var conf = {
        // 每个请求对应的form 的id 前缀，和 arrform 标识数组结合。
        "formprefix" : '#woo-form-',
        // 标识数组，每个标识对应一个瀑布流，本例有四个瀑布流。
        // 容易看出每个标识前加上 formprefix 就能对应#win-holder 里的form 表单：
        // <form id="woo-form-(collect|original|album|favalbum)">
        "arrform" : ['album','favalbum','collect','original'], 

        // 请求地址在页码处split分开的后半截(例如/message/list/1/?type=hot)
        // 前半截在 <form action="/message/list/"> action 里，
        // 后半截作为 arrsplit 参数值，上例中其值为 '/?type=hot'。
        // 前后半截均不包含页码数。
        // 这是为了应对页码数被设计在url 中间的悲剧情况。
        // 请将页码数设计在地址最后的位置如 <form action="/people/list/?page=">
        // 那么对应的 arrsplit 参数值为空字符串。
        "arrsplit" : ['/?type=hot','','',''],

        // 瀑布流每一列扩展宽度，此宽度包含两列之间的间距。
        "arrmasnw" : [245,250,250,245],

        // 瀑布流两列之间的间距。此例第一个瀑布流的可视宽度为 245-21=224
        "arrmargin" : [21,42,42,21],


        // 第一列特殊宽度 默认等于 arrmasnw。
        // 如果想让第一列(可左数第一列，也可右数第一列)宽度不同于其它列，
        // arrfmasnw 应设置为第一列和其它列的宽度差值。
        // 为什么参数值是一个数字0 而不是数组[0,0,0,0]？
        // 这里简化了传参，如果数组里所有元素的值相同，可以只传这个值。
        // 同理，上方的参数 arrsplit arrmasnw arrmargin 均适用这一简化规则
        // arrform 不适用这一简化规则，原因不解释。
        "arrfmasnw" : 0,

        /////////////////// 【上方各参数必须填写，否则后果自负】

        // 可自由选择安装 $gopre $gonext $gotop 等操作键。
        "gopre" : '#gopre',
        "gonext" : '#gonext',
        "gotop" : '#gotop',

        // footer 选择器，只要处于瀑布流翻页器下方的都可视为 footer。
        // 它的隐藏和显示将会受到控制。
        "footer" : '#footer,#preserve',

        // scroll 过程中触发的方法，可用于登录弹出框等
        "onScroll" : function (tp){
            // tp 为当前的scrolltop
//            if( (typeof ALREADYNOTICED === 'undefined' || !ALREADYNOTICED) && tp >= 1000 ){
//                ALREADYNOTICED = true
//                alert("弹出登录框")
//            }
        }
    }

    // 启动瀑布流，好短
    $.Woo(conf);
})
</script>

 

请求url地址采用 form 存放，有不习惯的朋友，还请将就：

<form id="woo-form-favalbum" action="/blog/list/?page=">
<input type="hidden" name="user_id" value="48"/>
<input type="hidden" name="pic" value="1"/>
<input type="hidden" name="like" value="1"/>
</form>

 

github 地址： https://github.com/duitang/waterfall

纯静态demo演示(模拟数据)：　demo1  demo2  demo3  demo4

（如有使用上的问题，请联系作者新浪微博 @transmars ）

 

　　最后闲聊部分，聊聊人生，谈谈理想。在前端领域摸爬滚打将近7年，用html搭搭框架，用css描描色彩，用js写写动画，这些普通得不能再普通的工作填满了每天的8小时，而沉浸于此的动力，同时也是最大的成就感来自于“造梦者的点睛之笔”，当设定好了梦的场景和剧情，最后注入灵魂的一笔非前端莫属。或许有人会觉得前端的工作没有创造性，比起设计师的工作，那确实，但任何天马行空的构想，只有靠一砖一瓦的真材实料才能构筑，互联网也不例外。协作的共识是，不能让所有人都专注于一处，前端更需要的是代码的组织和管理能力，但没有人会阻止你在任何环节发挥你的创造力，没有哪个Boss会忽视任何对公司有价值的创造力表演。其实，前端领域本身就是一个充满创新的领域，随着html5 标准的不断普及，各大浏览器对标准的趋于一致，前端工程师们有朝一日终将抛掉ie旧版本的沉重包袱，投入更多的精力到新技术、新平台、新应用的研究开发中去，前端事业在不久的将来必定蒸蒸日上，不是早有预测给出，未来六大高薪职业中，前端(不算后端)居其一么。

 

　　当前，我们正在招募前端开发伙伴，欢迎对堆糖前端职位有兴趣的同学大力将简历砸过来。收件箱：hr@duitang.com，并请尽量附上微博、个人主页链接。前端招聘要求 请戳这里 。

 

　　有干货，有思想，分享来自堆糖网。