masonry

前阵子看到有不少的网站，将网站中的Div区块，随着Div的高度，自行的向下编排，看起来蛮有杂志的感觉，而这种编排方式，中文叫作瀑布流版型，原因就在于，它会先取出Div的宽高，再依序的向下排列，就像瀑布一样，看起来很像是CSS的浮动排版一样，昨天看到好友哇哇的网站，也将首页改成这种瀑布流版型，由于哇哇的图有大有小，整个排起来特别的有fu。 虽然很有fu，但因为这种曝布流版型，会先取出Div的高度，再去计算出每个Div的位置，所以一旦图片比较晚载入，而程式已取出Div高度时，就会发生两个区块重叠的冏境，虽然这种瀑布流版型，可用CSS3中的column-count来完成，但IE要10.0才有支援XD~，所以只好利用jQuery的Masonry外挂元件来完成，且只要简单的设定参数，立即就可套用啰！喜欢这效果的朋友参考看看啰!改天梅干再来分享CSS3的版本，更简单更ez。