嫌麻烦可以直接下载下面的两个文件（注意：程序为UTF-8版本）：
滚动自动加载瀑布流代码[点此下载]
点击加载瀑布流代码[点此下载]
首先页面上必须加载这三个js：
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/jquery.masonry.min.js"></script>
<script type="text/javascript" src="{dede:global.cfg_templets_skin/}/js/waterfall.js"></script>瀑布流调用方法：
<ul class="clear" id="content">
{dede:list pagesize='3'}
<li class="post">
<a href="[field:arcurl/]" class="title">[field:title/]</a>
</li>
{/dede:list}
</ul>要注意，本瀑布流为无限加载形式，所以分页处一定要注意，调用方法为：
<div class=”next_page” style=”font-size:17px;”>
{dede:pagelist listitem=”next”/}
</div > 上面就是瀑布流的代码，一下简单放给大家如何修改为点击加载
首先打开waterfall.js文件：
原理只是把原始文件这里的鼠标绑定事件修改为了单击触发事件。
//首先给窗口绑定事件scroll
$(window).bind("scroll",function() {修改为
$("#dianhuafei").click(function() { 因为上文已经使用单击触发了事件，所以原有的判断滚动条是否接近底部已经没有意义了，故可以直接删去这个if判断，直接执行if里面的代码：
// 然后判断窗口的滚动条是否接近页面底部，这里的20可以自定义
if ($(document).scrollTop() + $(window).height() > $(document).height() - 20) { 我们需要使用dede的 {dede:pagelist listitem=”next”/}来获取每个页面的数据所以模板中的dede分页代码不能删去。
只需要将
else {
link.html("下一页没有了").removeAttr("href");
};修改为
else {
$("#dianhuafei").html("已经是最后一页了");
link.html("下一页没有了").removeAttr("href");
};同时将模板中代码按下文修改，原理是我们绑定的是id的dianhuafei的单击才会触发事件，因此我们要写一句触发事件的代码，原有的分页代码不能删除，所以我们用css将其隐藏即可。
<h2 class="next_page" style="font-size:17px;">
{dede:pagelist listitem="next"/}
</h2>修改为：
<div class="next_page" style="font-size:17px;">
<span id="dianhuafei">再看八条</span><div style="display:none;"> {dede:pagelist listitem="next"/}</div>
</div> 注：模板中列表调用代码{dede:list pagesize=’8′}中的8即为每次加载的条数。