Write the Code. Change the World.

3月 08

花瓣的内容排版是使用瀑布流的方式排版。实现瀑布流式的排版的插件蛮多的,blocksit 就是一个比较简便的插件。

依赖少,仅仅依靠 jquery。 css也少。用该插件,注意以下几个问题就可以了

  1. 每次执行 BlocksIt 之前,设置父容器的宽度的时候要正确。
  2. 图片加载完成后,再 BlocksIt 一次。防止,图片排版错乱。

其实,排版的是图片的父容器。使用的是绝对定位。而为什么总是说图片,就是因为所要展示的中心是图片。围绕图片,可以在图片上放置div,图片下边,等放置div。其结构可以有下边这样的层次构成。
继续阅读