web-dev-qa-db-ja.com

jQuery同位体センタリング

重複の可能性：
DIVをDIVの中央に配置する方法は？

下の画像をご覧ください。

enter image description here

赤いコンテナdivの内側の水平方向の中央に灰色の正方形を作成するにはどうすればよいですか？これはすべて同位体で作られているので、それを覚えておいてください。

前もって感謝します。

enter image description hereenter image description here

親（赤）のdivが常に中央に配置されている場合でも、灰色の小さいdivは配置されません。上の画像では、それらが1つの列に配置されている場合、その列はラッパー（赤）divの真ん中にある必要があります。

jquerycenteringjquery-isotope
21
user1130217

Isotopeのセンタリングを実装するのは実際には非常に簡単です（モバイルタッチデバイスとデスクトップデバイスで見栄えがするようにこれを行うサイトが完成したばかりです）。 David DeSandroのリポジトリからこのコードを含めるだけですbeforeこのブロックの最後に通常のアイソトープコード

<!-- centered layout extension http://isotope.metafizzy.co/ --> 

<script type="text/javascript">
$.Isotope.prototype._getCenteredMasonryColumns = function() {

    this.width = this.element.width();

    var parentWidth = this.element.parent().width();

    var colW = this.options.masonry && this.options.masonry.columnWidth || // i.e. options.masonry && options.masonry.columnWidth

    this.$filteredAtoms.outerWidth(true) || // or use the size of the first item

    parentWidth; // if there's no items, use size of container

    var cols = Math.floor(parentWidth / colW);

    cols = Math.max(cols, 1);

    this.masonry.cols = cols; // i.e. this.masonry.cols = ....
    this.masonry.columnWidth = colW; // i.e. this.masonry.columnWidth = ...
};

$.Isotope.prototype._masonryReset = function() {

    this.masonry = {}; // layout-specific props
    this._getCenteredMasonryColumns(); // FIXME shouldn't have to call this again

    var i = this.masonry.cols;

    this.masonry.colYs = [];
        while (i--) {
        this.masonry.colYs.Push(0);
    }
};

$.Isotope.prototype._masonryResizeChanged = function() {

    var prevColCount = this.masonry.cols;

    this._getCenteredMasonryColumns(); // get updated colCount
    return (this.masonry.cols !== prevColCount);
};

$.Isotope.prototype._masonryGetContainerSize = function() {

    var unusedCols = 0,

    i = this.masonry.cols;
        while (--i) { // count unused columns
        if (this.masonry.colYs[i] !== 0) {
            break;
        }
        unusedCols++;
    }

    return {
        height: Math.max.apply(Math, this.masonry.colYs),
        width: (this.masonry.cols - unusedCols) * this.masonry.columnWidth // fit container to columns that have been used;
    };
};
</script>

そして、通常どおりアイソトープを設定します

<script type="text/javascript">
$(function() {
    var $container = $('#container');
    // the usual stuff for layouting, sorting, filtering, limiting clicks to zones...
</script>
21
Systembolaget

最も単純な解決策が見つかりました。 Isotope内の「石積み」レイアウトを使用します。

$container.isotope({ 
  itemSelector: '.pbox', 
  layoutMode: 'masonry',
  masonry: { 
    isFitWidth: true 
  }
});
13
user1130217