Javascript 如何将 jQuery Masonry 与不同宽度的元素一起使用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6693929/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use jQuery Masonry with elements of different width?
提问by Eric
I am implementing the jQuery Masonry plugin, but I have problems with elements wider than one column, meaning that the div width of all Masonry elements is not identical. Could anybody help me with this?
我正在实现 jQuery Masonry 插件，但是我遇到元素宽度超过一列的问题，这意味着所有 Masonry 元素的 div 宽度不相同。有人可以帮我解决这个问题吗？
<!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>
回答by czlory
After a half day of trying different settings, trying to find out why my masonry plugin is not working, i read these post, i got the idea... i had to use the minimum common denominator of all my widths. But i had widths like 346, 278, 199... so i wondered, without any headache any of those widths is dividable by 1, so i tried... and magic happened, everything fell perfectly on into place.
在尝试不同的设置半天后，试图找出为什么我的砌体插件不起作用，我阅读了这些帖子，我明白了……我必须使用所有宽度的最小公分母。但是我有 346、278、199 之类的宽度......所以我想知道，这些宽度中的任何一个都可以被 1 整除，没有任何头痛，所以我尝试......奇迹发生了，一切都完美地就位。
So the simplest way to get it working, use 1 as columnWidth
所以让它工作的最简单方法是使用 1 作为 columnWidth
回答by frozenkoi
If you don't set a column width parameter when you set up masonry (i.e. $('#container').masonry({columnWidth:100})), then masonry defaults to the first brick's width. In your example, the 1st block is 300 pixels wide, so the minimum width a block will cover is 300 pixels, even tho its width is set to 100 pixels.
如果您在设置砌体（即$('#container').masonry({columnWidth:100})）时未设置列宽参数，则砌体默认为第一块砖的宽度。在您的示例中，第一个块的宽度为 300 像素，因此块将覆盖的最小宽度为 300 像素，即使其宽度设置为 100 像素。
A good column width number would be the minimum of the possible widths can be (like in your example, where they are all a multiple of 100px), or the greatest common divisor(for example, if bricks are 100, 150 and 200 pixels wide, 50 would be a good number to use for columnWidth).
一个好的列宽数应该是可能的宽度中的最小值（如在您的示例中，它们都是 100 像素的倍数），或最大公约数（例如，如果砖块的宽度为 100、150 和 200 像素） , 50 是用于 columnWidth 的好数字）。
回答by yuli chika
because of a margin: 10px;in your all item div's. so you should set a columnWidth : 120
因为margin: 10px;在你所有的项目 div 中。所以你应该设置一个columnWidth : 120
$(function(){
$('#container').masonry({
columnWidth : 120
});
});
回答by Variant
You need to specify a columnWidthto let the masonry know how many column you want:
您需要指定一个columnWidth让砌体知道您想要多少列：
$('#container').masonry(
{
columnWidth : 100
});
回答by jppag
If you know a minimum column width, just set that in your columnWidth and it will work. In my case that was 396. I had a column with double that width as well.
如果您知道最小列宽，只需在您的 columnWidth 中设置它，它就会起作用。在我的例子中是 396。我有一列宽度也是两倍。
$('.container').masonry({
columnWidth: 396,
itemSelector: '.item'
});
