2012-07-24 83 views
0

出於某種原因,我的jQuery砌體對待col1和col2上有所不同,雖然他們是在CSS一樣(除了顏色和裕)jQuery的砌體checkerboarding

$(document).ready(function() { 
     $('#container').masonry({ 
      columnWidth:800 
     }); 

$('#container').masonry({ 
      itemSelector: '.col1', 
      columnWidth: 150 
     }); 

     $('#container').masonry({ 
      itemSelector: '.col2', 
      columnWidth: 150 
     }); 
}); 

col2的坐右邊,剛好低於COL1,就像棋盤。這裏是JSfiddler與代碼的鏈接。任何人都可以發現爲什麼這樣的結果? JS Fiddler Code of this example 感謝, 雅閣

回答

0

這是正常的,當你有3列,並在每列僅1層磚。當你給它一個或兩個變量時,基本上解決了一個困難的數學問題的程序,你會期望什麼?這是一個解決方案,但可能不是最好的?嘗試爲每個容器添加更多磚塊,並且可以看到算法如何解決您的問題?

按照要求,我建議你再次讀取磚石文檔和我的答案,但如果你只想磚石算法添加的主要內容,你不需要它。每一種磚:

$('#container').masonry({ 
     columnWidth:800 
    }); 

    $('#container').masonry({ 
     itemSelector: '.col1', 
     columnWidth: 150 
    }); 

    $('#container').masonry({ 
     itemSelector: '.col2', 
     columnWidth: 150 
    }); 

    $('#container').masonry({ 
     itemSelector: '.col3', 
     columnWidth: 150 
    }); 

剛它添加1次,並改變所有的磚塊有例如1種選擇:

$('#container').masonry({ 
     itemSelector: '.main', 
     columnWidth: 150 
    }); 
+0

林瞄準什麼是隻是在主要內容磚石和將頁眉和左導航欄免費磚混結構。爲主要內容添加更多磚塊(「容器」)並不能解決此問題。我想我並不完全理解你所說的解決方案。 您可以通過添加更多磚塊來看到它並不能解決太多問題 [VIEW CODE](http://jsfiddle.net/ArgyleGost/VBacg/37/) – 2012-07-25 08:24:03

+0

@ArgyleGhost:我添加了一些信息。 – Bytemain 2012-07-25 08:50:58

+0

我明白了。非常感謝。砌體文件很簡短,需要更好的幫助頁面。也許他們可以支付你作爲承包商:)感謝您的幫助Chiyou – 2012-07-25 09:31:55