absolute,為什么要加絕對定位，是不加以后會亂，可是原是什么，這三種布局具體元，區(qū)別是什么，感覺好混亂
for(var i=0;i<oBoxs.length;i++){
?? ??? ??? ?if(i<cols){
?? ??? ??? ??? ??? ?hArr.push(oBoxs[i].offsetHeight);
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ?var minH=Math.min.apply(null,hArr);
?? ??? ??? ??? ??? ??? ?var index=getMinhIndex(hArr,minH);//封裝 找最小值的索引
?? ??? ??? ??? ??? ??? ?oBoxs[i].style.position="absolute";
?? ??? ??? ??? ??? ??? ?oBoxs[i].style.top=minH+"px";
?? ??? ??? ??? ??? ??? ?//oBoxs[i].style.left=oBoxs[index].style.left;
?? ??? ??? ??? ??? ??? ?oBoxs[i].style.left=oBoxs[index].offsetLeft+"px";
?? ??? ??? ??? ??? ??? ?hArr[index]+=oBoxs[i].offsetHeight;
?? ??? ??? ??? ??? ?}
?? ??? ?}
2016-06-14
存放圖片的div都從id為main的父元素div那里繼承了位置屬性relative。relative是相對于自身原位置的定位，雖然元素不在原位置了， 但是還占據(jù)著原位置的空間，別的元素不能擺放到那里，就是占著茅坑不拉屎的意思，一個元素占了兩個位置；absolute是相對于父元素的定位，元素改變位置后，不再占用原來位置的空間，原位置的空間可以擺放別的元素，有利于元素按自己想要的順序重新排列。具體relative和absolute的區(qū)別可以去W3C的CSS閱讀或者百度。
這三種方法布局，其實原理上講是兩個，js和jquery原理一樣，css是另一種原理。
js和jquery是通過計算來排序和加載圖片的，從第一行開始遍歷，找出最矮那一列，把新的圖片加到最矮那一列下面，并把新圖片的高度加到最矮那一列的高度上，又產(chǎn)生新的最矮的一列，繼續(xù)遍歷，把新的圖片加到最矮那一列下面，并把新圖片的高度加到最矮一列的高度上，以此類推。等到原始頁面上圖片都加載完時，從后臺讀取新的圖片按照上面的方法加載到各列。
css3用column-width屬性規(guī)定每列的寬度，系統(tǒng)會自動計算一屏能分幾列，然后把所有的圖片自動分列排序，整個過程系統(tǒng)自動完成，不受你的控制，也就是說圖片的加載順序你不能向js那樣控制先加載哪個后加載哪個。