什么是瀑布流（Waterfall）

Posted 2023-04-18

参考技术A #1：什么是瀑布流（Waterfall）

一句话：是媒体的收益优化技术，通过对请求的广告联盟进行阶梯分流依次请求（类似于瀑布而得名），用于提高广告位的填充率（广告曝光/请求库存），从而提高媒体侧的收益。

#2：瀑布流

角色回到媒体方（假如我是媒体）。

我辛辛苦苦做出一个网站或者App，肯定是想要通过卖广告挣钱的。

一开始我接入了一个广告联盟，来试试收入怎么样。

这个时候我最优收益的方式是： 谁给的钱多就选谁 （选择竞价最高的广告来展示）。

后来我发现其他广告联盟的出价很香，于是我接入更多的广告联盟来提高收入。

这个时候我的难点来了，这么多广告平台，我应该曝光哪个？

1）如果要比价，那我就得有能力在各个广告平台中进行比价，我一个搞网站的，又不是专门搞广告的。

2）如果不比价，我选哪个广告平台曝光能收益最高呢

我选历史出价一直高的广告联盟进行曝光，老板之前给的多，这次估计给的也不会差。

然后我就根据历史数据，对这些要买我流量的联盟分成三六九等，VIP客户可以优先拿到曝光，剩下的逐渐分下去。

这样我既能把我的广告卖出高价，又能把广告全部卖出去。

#3：有什么缺点

使用历史出价来预估这次出价，并不能保证能拿到最大收益。因为我之前虽然出的高，这次就是出一点，为啥不行呢。

#4：未来的发展方向

现在是一种常用的方式，未来可能会被headbidding替代。

jQuery瀑布流插件——jQuery.Waterfall

插件——jQuery.Waterfall

思路：

　　其实只要了解了整个流程，要实现这个插件也不难，大家都玩过俄罗斯方块吧，原理差不多，找到合适的地方叠上去就好了，在这里，每个块的宽度是必需给定的，然后计算出列数，再维护一个数组，存储每列的高度，往最小高度的列添加块即可。滚动时，当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据。

注意的地方：

　　如果瀑布流的块中包含图片，则需要事先知道图片的高度(其实就是为了要计算出整个块的高度，以便精确定位)，图片的高度可以从服务器返回，本插件是整合planeArt的一个图片预加载小插件，可以快速获取图片的宽高，无需服务器返回。

实现的功能有：

1. 定义了列宽，根据页面大小自动排列
2. 可事先放置块。(如将一个目录栏作为瀑布流的第一块砖头放在左上角)
3. 图片大小根据列宽等比例缩放(ie6下会失真，无法解决)
4. 自定义异步请求函数（返回JSON，json格式与html模板对应即可，默认格式请看demo json.js）
5. 自定义html模板

用法：

$(‘#id‘).waterfall({
    itemClass: ‘wf_item‘,    // 砖块类名
    imgClass: ‘thumb_img‘,    // 图片类名
    colWidth: 235,            // 列宽
    marginLeft: 15,            // 每列的左间宽
    marginTop: 15,            // 每列的上间宽
    perNum: ‘auto‘,            // 每次下拉时显示多少个(int)(默认是列数)
    isAnimation: true,        // 是否使用动画效果
    ajaxTimes: ‘infinite‘,    // 限制加载的次数(int) 字符串‘infinite‘表示无限加载 
    url: null,                // 数据来源(ajax加载，返回json格式)，传入了ajaxFunc参数，此参数将无效
    ajaxFunc: null,            // 自定义异步函数, 第一个参数为成功回调函数，第二个参数为失败回调函数
                            // 当执行成功回调函数时，传入返回的JSON数据作为参数
    createHtml: null        // 自定义生成html字符串函数,参数为一个信息集合，返回一个html字符串
});

本插件支持IE6+、chrome、firefox、opera、safari等主流浏览器。

其实这也不算得上一个插件，因为通用性实在不怎样，分页功能也没实现，不过可以做个参考。（转载来的）