Masonry

Official plugin web site:

http://masonry.desandro.com/

Notes:

  1. This plugin is great but not perfect because it won’t change item sizes automatically
  2. Doesn’t have to use “<div></div>”, <ul><li></li></ul> combination works fine. Just remember to set “float” to “left” of child items.
  3. If you wanna show items width different width or height, you need to calculate the size of every item. This site is a good example:
    http://erikjohanssonphoto.com/work/imagecats/personal/

    1. Width of container
    2. How many columns you want
    3. Define different sizes of child items

Example:

Width of container is 565px and 3 columns at most.(http://case.wikirex.com/sharon/celadon/work.php)

Append Items

Reference: