web-dev-qa-db-ja.com

異なる幅の要素でjQuery組積造を使用するにはどうすればよいですか？

JQuery Masonryプラグインを実装していますが、1列より広い要素に問題があります。つまり、すべての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>
javascriptjqueryjquery-masonry
18
Eric

さまざまな設定を半日試した後、石積みプラグインが機能しない理由を調べて、これらの投稿を読んで、アイデアを得ました...すべての幅の最小公分母を使用する必要がありました。しかし、私は346、278、199のような幅を持っていたので、頭痛がなく、これらの幅は1で割り切れるのではないかと思ったので、試してみました...そして魔法が起こり、すべてが完全に所定の位置に収まりました。

したがって、それを機能させる最も簡単な方法は、columnWidthとして1を使用することです。

45
czlory

組積造を設定するときに列幅パラメータを設定しない場合（つまり、$('#container').masonry({columnWidth:100})）、組積造はデフォルトで最初のレンガの幅になります。この例では、最初のブロックの幅は300ピクセルであるため、ブロックの幅が100ピクセルに設定されていても、ブロックがカバーする最小幅は300ピクセルです。

適切な列幅の数値は、可能な幅の最小値（たとえば、すべて100pxの倍数である例のように）、または 最大公約数 （たとえば、レンガが幅100、150、200ピクセル、50はcolumnWidthに使用するのに適した数値です）。

16
frozenkoi

すべてのアイテムdivにmargin: 10px;があるためです。したがって、columnWidth：12を設定する必要があります

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

石積みに必要な列の数を知らせるには、columnWidthを指定する必要があります。

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

最小列幅がわかっている場合は、それをcolumnWidthに設定するだけで機能します。私の場合は396でした。その幅の2倍のカラムもありました。

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

});
0
jppag