jQuery同位素居中

Possible Duplicate:
07000

请看下图：

如何使灰色方块在红色容器div内水平居中？这都是用同位素制成的，所以请记住这一点。

提前致谢。

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

解决方法

实现同位素居中的实际上很简单(刚刚完成了一个在移动触摸设备以及桌面设备上看起来很好的站点)。您只需将这一段代码从David DeSandro的存储库中包含在此块末尾的通用同位素代码之前

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

jQuery同位素居中

解决方法

猜你在找的jQuery相关文章