如何使用不同寬度元素的jQuery砌體？

我正在實施jQuery Masonry插件，但是我遇到了比一列更寬的元素問題，這意味着所有砌體元素的div寬度都不相同。有人能幫助我嗎？如何使用不同寬度元素的jQuery砌體？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test</title> 
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> 
<script src="js/masonry.min.js" type="text/javascript"></script> 
</head> 
<style> 
.item0,.item1,.item2,.item3,.item4,.item5,.item6,.item7,.item8{float:left; margin: 10px; 
    background:#999;} 

.item1,.item0 { 
    width:300px; 
} 
.item2 { 
    width:200px; 
} 
.item3,.item8 { 
    width:100px; 
} 
.item4,.item5,.item6,.item7{ 
    width:100px; 
} 

#container{ 
    float:left; width:1000px; 
    } 
</style> 

<script type="text/javascript"> 
$(function(){ 
    $('#container').masonry(
    {}); 
}); 
</script> 
<body> 
<div id="container"> 
    <div class="item0">1 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div> 
    <div class="item0">2 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div> 
    <div class="item1">3 sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div> 
    <div class="item2">4 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div> 
    <div class="item3">5 sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div> 
    <div class="item4">6 sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div> 
    <div class="item5">7 tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div> 
    <div class="item6">sdf sdf sdf sdf d dsfdsfds sf sdf sdfsdf </div> 
    <div class="item7">sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div> 
    <div class="item8">tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div> 
    <div class="item7">sdfsdfsdf sdf sdfsdf sdf sdfs ddsf dsf sd sdf </div> 
    <div class="item8">tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf tsetsdf sdf sdfs dsdf sds dsf sdf dsf dsf df df df df dfs dfsdf sdf df sdf sdf sdf sdf</div> 
</div> 
</body> 
</html>

來源

2011-07-14 Eric

你需要指定一個columnWidth，讓磚石知道你要多少列：

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

來源

2011-07-14 14:03:14 Variant

但添加「columnWidth：100」後也是一樣的。這是不正確 – Eric

因爲在你的所有項目div的一個margin: 10px;的。所以你應該設定一個columnWidth時：120

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

來源

2011-07-17 17:27:14

如果您沒有設置列寬參數，當你設置砌築（即$('#container').masonry({columnWidth:100})），然後砌築默認爲第一塊磚的寬度。在你的例子中，第一個塊的寬度爲300像素，所以塊的最小寬度將爲300像素，即使其寬度設置爲100像素。

一個好的列寬度數將是可能的寬度的最小值（例如，在你的例子中，它們都是100px的倍數），或者greatest common divisor（例如，如果磚是100,150和200像素寬，50將是一個很好的數字用於columnWidth）。

來源

2011-11-22 20:02:15 frozenkoi

最後，有人解釋了可以理解列寬的方法，而不是像往常一樣亂七八糟。 – Systembolaget

經過半天的嘗試不同的設置，試圖找出爲什麼我的磚石插件不工作，我閱讀這些帖子，我明白了......我必須使用我所有寬度的最小公分母。但我的寬度像346,278,199 ...所以我想知道，沒有任何頭痛，任何寬度都可以被1分割，所以我嘗試了...和魔法發生了，一切都完美地落在了地方。

所以，最簡單的方式得到它的工作，使用1作爲columnWidth時

來源

2012-09-19 10:42:26 czlory

你的意思是最大的共同點，謝謝，雖然這是唯一能夠解決我的問題的解決方案， – javiervd

非常感謝，它適用於我！ – Isis

謝謝！上帝該死的想法比想要的要困難得多。 –

如果你知道一個最小列寬，只是設置在columnWidth時，它會工作。在我的情況是396.我有一個雙倍寬度的列。

$('.container').masonry({ 
    columnWidth: 396, 
    itemSelector: '.item' 

});

來源

2015-04-28 14:33:03 jppag

如何使用不同寬度元素的jQuery砌體？

回答

相關問題