首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >jQuery同位素定心

jQuery同位素定心
EN

Stack Overflow用户
提问于 2012-08-27 00:49:10
回答 2查看 14.2K关注 0票数 22

可能重复:

How to center DIV in DIV?

请看下图:

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

提前谢谢。

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

EN

回答 2

Stack Overflow用户

发布于 2012-08-27 02:05:32

实际上,Isotope的居中实现非常简单(刚刚完成了一个站点,它可以在移动触摸设备和桌面设备上看起来都很好)。您只需在此代码块末尾的之前包含来自David DeSandro的存储库的这一小段代码

代码语言:javascript
复制
<!-- 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>

然后你只需像往常一样设置Isotope

代码语言:javascript
复制
<script type="text/javascript">
$(function() {
    var $container = $('#container');
    // the usual stuff for layouting, sorting, filtering, limiting clicks to zones...
</script>
票数 21
EN

Stack Overflow用户

发布于 2012-08-27 01:51:25

找到最简单的解决方案。在Isotope中使用"masonry“布局:

代码语言:javascript
复制
$container.isotope({ 
  itemSelector: '.pbox', 
  layoutMode: 'masonry',
  masonry: { 
    isFitWidth: true 
  }
});
票数 13
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/12131989

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档