# 瀑布流(Pinterest-style) layout 目前看見 3 種作法 jquery plug in salvattore.js CSS3 column # jquery plug in ## Masonry 一款較多人使用的 jQuery plug in, 可向下相容到 IE8 Masonry ## Grid-A-Licious jQuery plug in, 向下相容到 IE9 Grid-A-Licious # salvattore 利用 data attribute 來達到 CSS3 column 的效果 獨立運作的 js 不必依靠其他的 js library 輕巧快速 向下相容到 IE9 salvattore 不過沒 CSS 所以要加入 CSS 以便讓版面順利出來 已修改的 salvattore CSS source code(可依需求進行修改) @-webkit-keyframes showsup { from { opacity: 0; -webkit-transform: translate(0, -20px); } to { opacity: 1; -webkit-transform: translate(0, 0); } } @-moz-keyframes showsup { from { opacity: 0; -moz-transform: translate(0, -20px); } to { opacity: 1; -moz-transform: translate(0, 0); } } @-o-keyframes showsup { from { opacity: 0; -o-transform: translate(0, -20px); } to { opacity: 1; -o-transform: translate(0, 0); } } @keyframes showsup { from { opacity: 0; transform: translate(0, -20px); } to { opacity: 1; transform: translate(0, 0); } } . ...