Как использовать каменную кладку jQuery с элементами различной ширины?

Я реализую плагин jQuery 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>

Ответ 1

После половины дня попыток разных настроек, пытаясь выяснить, почему мой плагин масонства не работает, я прочитал этот пост, у меня появилась идея... мне пришлось использовать минимальный общий знаменатель всей моей ширины. Но у меня были ширины, такие как 346, 278, 199... так что я подумал, что без какой-либо головной боли любая из этих ширин делится на 1, поэтому я попытался... и волшебство произошло, все упало отлично на месте.

Итак, самый простой способ заставить его работать, используйте 1 как columnWidth

Ответ 2

Если вы не задаете параметр ширины столбца при настройке кладки (т.е. $('#container').masonry({columnWidth:100})), то по умолчанию каменная кладка будет равна первой ширине кирпича. В вашем примере 1-й блок имеет ширину 300 пикселей, поэтому минимальная ширина блока будет составлять 300 пикселей, даже если ширина его равна 100 пикселям.

Хорошим номером ширины столбца будет минимальная возможная ширина (например, в вашем примере, где все они кратные 100 пикселей), или наибольший общий делитель (например, если кирпичи имеют ширину 100, 150 и 200 пикселей, 50 будет хорошим числом для использования в столбце ширины).

Ответ 3

из-за margin: 10px; во всех ваших элементах div. поэтому вы должны установить columnWidth: 120

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

Ответ 4

Вам нужно указать columnWidth, чтобы каменная кладка знала, сколько столбцов вы хотите:

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

Ответ 5

Если вы знаете минимальную ширину столбца, просто установите это значение в своей ширине столбца и оно будет работать. В моем случае это было 396. У меня был столбец с двойной шириной.

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

});