1

私はjQueryIsotopeを使用しています。これは素晴らしいプラグインですが、石積みモードでのアイテムの配置に少し問題があります。私のコンテナの幅は960ピクセルで、目標は、960ピクセルのグリッドシステムを使用しているかのように、4つのアイテムを完全に並べることです。したがって、左端と右端の両方がコンテナの端に接触します。これが現在の様子のスクリーンショットです。

ここに画像の説明を入力してください

私のコードは現在そのようなものです：

JS：

$('#container').isotope({
  itemSelector : '.item',
      masonry : {
          columnWidth : 240,
          gutterWidth: 10
      }
});

CSS：

.item{
width:230px;
background:red;
overflow: hidden;
}

HTML：

 <div class="item">a</div>

これまでのところ、私がそれを機能させることができた唯一の方法は、幅をに設定する240pxことですが、アイテム間にギャップはありません。

編集

これが私が持っているものを示すフィドルですhttp://jsfiddle.net/qGJhe/

4

2 に答える 2

3

変更したレイアウトモードを追加しましたか？

使用gutterWidthは標準オプションではありません。ドキュメントには、デモページのソースからコードを追加する必要があると書かれています。

http://isotope.metafizzy.co/custom-layout-modes/masonry-gutters.html

// modified Isotope methods for gutters in masonry
$.Isotope.prototype._getMasonryGutterColumns = function() {
  var gutter = this.options.masonry && this.options.masonry.gutterWidth || 0;
      containerWidth = this.element.width();

  this.masonry.columnWidth = this.options.masonry && this.options.masonry.columnWidth ||
                // or use the size of the first item
                this.$filteredAtoms.outerWidth(true) ||
                // if there's no items, use size of container
                containerWidth;

  this.masonry.columnWidth += gutter;

  this.masonry.cols = Math.floor( ( containerWidth + gutter ) / this.masonry.columnWidth );
  this.masonry.cols = Math.max( this.masonry.cols, 1 );
};
于 2013-03-13T21:53:38.693 に答える
3

jsFiddle（http://jsfiddle.net/qGJhe/）に基づいて、問題が発生している余分なギャップを確認するためにコンテナーの背景色を追加しましたが、余分なギャップは表示されません。

また、レイアウトはレスポンシブであるため、960pxの幅は尊重されません。したがって、実際のページにあるのとまったく同じコード（html、css、jQuery）をコピーしなかったように思われます。

とにかく、レスポンシブコードビットを無効にして、固定された960pxの幅を尊重するようにし、10pxの余分なギャップを見ました。http://jsfiddle.net/shodaburp/qGJhe/3/

そのため、ガターサイズと要素の幅の計算がかなり不正確であることに気付きました。

240pxの要素幅では、ガター用のスペースはまったくありません。 http://jsfiddle.net/shodaburp/qGJhe/4/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

gutterSize = (960 - (240 * 4) ) / 3) = 0

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (240 * 4) + (3 * 0) = 960

extraGap = containerWidth - totalWidth

extraGap = 960 - 960 = 0

230pxの要素幅と13のガターサイズにより、1pxの余分なギャップが得られます http://jsfiddle.net/shodaburp/qGJhe/5/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

gutterSize = (960 - (230 * 4) ) / 3) = 13.33 = 13 (rounded)

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (230 * 4) + (3 * 13) = 959

extraGap = containerWidth - totalWidth

extraGap = 960 - 959 = 1

960px以内にうまく収まるように4つの要素を続けて配置する場合は、要素の幅を225pxに減らし、ガターサイズを20pxにする必要があります。

225pxの要素幅と20のガターサイズが最適です！ http://jsfiddle.net/shodaburp/qGJhe/6/

gutterSize = (containerWidth - (elementWidth * numberOfElement) / numberOfGutters)

gutterSize = (960 - (225 * 4) ) / 3) = 20

totalWidth = (elementWidth * numberOfElement) + (gutterSize * numberOfGutters)

totalWidth = (225 * 4) + (3 * 20) = 960

extraGap = containerWidth - totalWidth

extraGap = 960 - 960 = 0

于 2013-03-18T07:54:45.377 に答える