存放圖片的div都從id為main的父元素div那里繼承了位置屬性relative。relative是相對于自身原位置的定位，雖然元素不在原位置了， 但是還占據著原位置的空間，別的元素不能擺放到那里，就是占著茅坑不拉屎的意思，一個元素占了兩個位置；absolute是相對于父元素的定位，元素改變位置后，不再占用原來位置的空間，原位置的空間可以擺放別的元素，有利于元素按自己想要的順序重新排列。具體relative和absolute的區別可以去W3C的CSS閱讀或者百度。

這三種方法布局，其實原理上講是兩個，js和jquery原理一樣，css是另一種原理。

js和jquery是通過計算來排序和加載圖片的，從第一行開始遍歷，找出最矮那一列，把新的圖片加到最矮那一列下面，并把新圖片的高度加到最矮那一列的高度上，又產生新的最矮的一列，繼續遍歷，把新的圖片加到最矮那一列下面，并把新圖片的高度加到最矮一列的高度上，以此類推。等到原始頁面上圖片都加載完時，從后臺讀取新的圖片按照上面的方法加載到各列。

css3用column-width屬性規定每列的寬度，系統會自動計算一屏能分幾列，然后把所有的圖片自動分列排序，整個過程系統自動完成，不受你的控制，也就是說圖片的加載順序你不能向js那樣控制先加載哪個后加載哪個。