帝国cms如何实现瀑布流方式的图片布局?

时间:2022-06-10 15:06:01 阅读: 最新文章 文档下载
说明:文章内容仅供预览,部分内容可能不全。下载后的文档,内容与下面显示的完全一致。下载之前请确认下面内容是否您想要的,是否完整无缺。
瀑布流方式实现图片布局会用到js,然后加载也会相对较慢,如果不用js,在帝国cms后台系统应该怎么实现呢?其实就用最简单的代码,实现瀑布流布局,没有繁琐的css,没有jq,只需要做到以下就可以实现瀑布流的效果。
帝国cms如何实现瀑布流方式的图片布局?
  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--] 
上面的代码就是例用帝国cms的列表调用规则来实现的,思路很简单,整个页面看成是三列布局,分别用三个ul标签来显示,列表项都纵向排列。最后的数字21,一定要是你最后的分页数,否则从22张图片开始,排列序号又不一样了,不妨尝试一下哦!

本文来源:https://www.wddqw.com/6xjh.html