效果展示

帝國CMS實現瀑布流布局的好處是：用最簡單的代碼，沒有繁瑣的css，沒有jq，只需要運用帝國CMS靈活的數據調用。

瀑布流布局詳細方法

按如下操作即可實現瀑布流布局效果。思路：看成是三列布局，分別用三個ul來調用。

帝國cms列表模板，欄目展示24條記錄，所以每個ul調用8條。

1. [!--empirenews.listtemp--]
2. <ul>
3.     <!--list.var1-->
4.     <!--list.var4-->
5.     <!--list.var7-->
6.     <!--list.var10-->
7.     <!--list.var13-->
8.     <!--list.var16-->
9.     <!--list.var19-->
10. </ul>
11. <ul>
12.     <!--list.var2-->
13.     <!--list.var5-->
14.     <!--list.var8-->
15.     <!--list.var11-->
16.     <!--list.var14-->
17.     <!--list.var17-->
18.     <!--list.var20-->
19. </ul>
20. <ul>
21.     <!--list.var3-->
22.     <!--list.var6-->
23.     <!--list.var9-->
24.     <!--list.var12-->
25.     <!--list.var15-->
26.     <!--list.var18-->
27.     <!--list.var21-->
28. </ul>
29. [!--empirenews.listtemp--]