jQuery同位素居中
可能重复：
如何将DIV集中到DIV中？
请看下面的图片：
我怎样才能使灰色方块在红色容器div内水平居中？ 这一切都是用同位素制成的，所以请记住这一点。
提前致谢。
即使父母（红色）div总是在中间对齐，灰色的，小的不是。 在顶部图像中，当它们排列在单个列中时，该列应该位于包装（红色）div的中间。
实现对Isotope的集中实际上非常简单（刚刚完成了一个在移动触摸设备和桌面设备上看起来不错的网站）。 您只需在本块末尾的通常Isotope代码之前包含来自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>
最简单的解决方案。 使用同位素内的“石工”布局：
$container.isotope({
itemSelector: '.pbox',
layoutMode: 'masonry',
masonry: {
isFitWidth: true
}
});