2012-07-24 85 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