DIVs之間的空間，甚至唱jquery砌體

我試圖安排幾個動態多尺寸的DIV適合在一個容器中。根據會員建議在這裏在stackoverflow，我想獲得jquery石工的好處，以完成我的工作。但我有問題，如下所述。DIVs之間的空間，甚至唱jquery砌體

使用jquery masonry解決這個問題時，他們有什麼特別的技巧嗎？我閱讀他們的文檔，但我肯定錯過了一些東西。

如果有人能幫助，它將不勝感激。

HTML代碼：

<div class="blockscont"> 
    <div class="blocks" style="width:200px;height:200px">A</div> 
    <div class="blocks" style="width:400px;height:400px">B</div> 
    <div class="blocks" style="width:200px;height:200px">C</div> 
    <div class="blocks" style="width:200px;height:200px">D</div> 
    <div class="blocks" style="width:200px;height:200px">E</div> 
    <div class="blocks" style="width:200px;height:200px">F</div> 
    <div class="blocks" style="width:600px;height:200px">G</div> 
    <div class="blocks" style="width:200px;height:200px">H</div> 
    <div class="blocks" style="width:200px;height:200px">I</div> 
    <div class="blocks" style="width:400px;height:200px">J</div> 
</div>

JQUERY砌體：

$(function() { 
    $(window).load(function(){ 
     $('#blockscont').masonry({ 
      itemSelector : '.blocks', 
      columnWidth : 0 
     }); 
    }); 
});

OUTPUT： Example

來源

2013-03-19 abdfahim

我沒有看到使用磚石此佈局的一個問題，只要容器是正確的大小，你會得到你想要的格式。

我已經設置了your example in jsFiddle，它似乎工作正常。

HTML（和你的一樣）

<div id="blockscont"> 
    <div class="blocks" style="width:200px;height:200px">A</div> 
    <div class="blocks" style="width:400px;height:400px">B</div> 
    <div class="blocks" style="width:200px;height:200px">C</div> 
    <div class="blocks" style="width:200px;height:200px">D</div> 
    <div class="blocks" style="width:200px;height:200px">E</div> 
    <div class="blocks" style="width:200px;height:200px">F</div> 
    <div class="blocks" style="width:600px;height:200px">G</div> 
    <div class="blocks" style="width:200px;height:200px">H</div> 
    <div class="blocks" style="width:200px;height:200px">I</div> 
    <div class="blocks" style="width:400px;height:200px">J</div> 
</div>

腳本（簡化爲的jsfiddle使用）

$(function(){ 
    $('#blockscont').masonry({ 
     itemSelector: '.blocks' 
    }); 
});

我已經刪除選項columnWidth : 0作爲似乎使不任何差異。

CSS

.blocks { 
    background-color: #D7E4BC; 
    outline:1px solid white; 
}

outline使用，不border，以顯示塊，但防止其規模日益擴大和（至少在鉻）弄亂佈局。

應該沒有必要將浮標應用到任何元素，因爲它是砌體工作來定位塊。

來源

2013-07-01 11:48:37 Tony

只是爲了後人（正如我遇到這一點，而有類似的問題）佈局中的空白可能是由於錯誤地設置columnWidth造成的。

如果您沒有明確說明columnWidth，它將取自第一項的寬度。我的問題出現了，因爲我的第一個項目應該跨越兩列。我通過使用另一個項目的寬度來設置columnWidth來解決這個問題。

$('#m-container').masonry({ 
    itemSelector: '.m-item', 
    columnWidth: $('.size1')[0] 
});

來源

2015-01-09 16:45:47 Swiftly85

DIVs之間的空間，甚至唱jquery砌體

回答

相關問題