jQuery同位素居中 [英] jQuery isotope centering

问题描述

可能重复:
如何在DIV中将DIV居中?

Possible Duplicate:
How to center DIV in DIV?

请看下面的图片:

如何使灰色方块在红色容器div内水平居中?这都是同位素制成的，因此请记住这一点.

How can I make the grey squares horizontally centered inside the red container div? This is all made with isotope, so please keep that in mind.

谢谢.

即使父(红色)div始终在中间对齐，灰色，较小的div也不会对齐. 在顶部图像中，当它们在单个列中对齐时，该列应位于包装器(红色)div的正中间.

Even if the parent (red) div is always aligned in the middle, the grey, smaller ones are not. In the top image, when they are aligned in one single column, that column should be in the exact middle of the wrapper (red) div.

推荐答案

实现同位素居中实际上非常简单(刚完成的网站可以做到在移动触摸设备和台式机设备上看起来都不错).您只需在此块末尾的之前之前从David DeSandro的存储库中包含这部分代码

It's actually very simple to implement centering for Isotope (just finished a site that does this to look good on mobile touch devices as well as desktop devices). You just include this bit of code from David DeSandro's repository before the usual Isotope code at the end of this block

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

然后您像往常一样设置同位素

And then you just set up Isotope as usual

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

这篇关于jQuery同位素居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！