Как использовать jQuery Masonry с элементами разной ширины? - PullRequest
Новая
       13

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

18 голосов
/ 14 июля 2011

Я реализую плагин jQuery Masonry, но у меня проблемы с элементами, размер которых превышает один столбец, что означает, что ширина div всех элементов Masonry не идентична.Кто-нибудь может мне помочь с этим? 

<!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>

Ответы [ 5 ]

45 голосов
/ 19 сентября 2012

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

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

16 голосов
/ 23 ноября 2011

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

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

4 голосов
/ 17 июля 2011

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

$(function(){    
    $('#container').masonry({
        columnWidth : 120 
    });
});
2 голосов
/ 14 июля 2011

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

$('#container').masonry(
  {
     columnWidth : 100
  });
0 голосов
/ 28 апреля 2015

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

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

});
...