Question

我正在实现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>

Answer 1

经过半天尝试不同的设置，试图找出我的砌体插件无法正常工作的原因，我读了这些帖子，我明白了......我必须使用我所有宽度的最小公分母。但是我有宽度像346,278,199 ......所以我想知道，没有任何头痛，这些宽度可以分为1，所以我试过......魔法发生了，一切都完全落到了位置。

这是使其工作的最简单方法，使用1作为columnWidth

Answer 2

如果在设置砌体（即$('#container').masonry({columnWidth:100})）时未设置列宽参数，则砌体默认为第一个砖的宽度。在您的示例中，第一个块的宽度为300像素，因此块将覆盖的最小宽度为300像素，即使其宽度设置为100像素。

一个好的列宽编号是可能的宽度的最小值（如在你的例子中，它们都是100px的倍数），或greatest common divisor（例如，如果砖是100， 150和200像素宽，50将是一个很好的数字用于columnWidth）。

Answer 3

因为所有项目div中都有margin: 10px;。所以你应该设置一个 columnWidth：120

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

Answer 4

您需要指定columnWidth以让砌体知道您想要的列数：

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

Answer 5

如果您知道最小列宽，只需在columnWidth中设置它，它就可以工作。在我的情况下是396.我有一个宽度加倍的列。

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

});

如何使用jQuery砌体与不同宽度的元素？

5 个答案: