blocks|key|213243|text|找到最简单的解决方案。在Isotope中使用"masonry“布局：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|213244|$container.isotope({+
++itemSelector:+'.pbox',+
++layoutMode:+'masonry',
++masonry:+{+
++++isFitWidth:+true+
++}
});|code-block|syntax|javascript|213245|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simplest solution found. Use the "masonry" layout inside Isotope: 

<pre><code>$container.isotope({ 
 itemSelector: '.pbox', 
 layoutMode: 'masonry',
 masonry: { 
 isFitWidth: true 
 }
});
</code></pre>

blocks|key|216399|text|实际上，Isotope的居中实现非常简单(刚刚完成了一个站点，它可以在移动触摸设备和桌面设备上看起来都很好)。您只需在此代码块末尾的之前包含来自David+DeSandro的存储库的这一小段代码|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|216400|+

<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+%7C%7C+//+i.e.+options.masonry+&&+options.masonry.columnWidth

++++this.$filteredAtoms.outerWidth(true)+%7C%7C+//+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%2B%2B;
++++}

++++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>|code-block|syntax|javascript|216401|然后你只需像往常一样设置Isotope|216402|<script+type="text/javascript">
$(function()+{
++++var+$container+=+$('#container');
++++//+the+usual+stuff+for+layouting,+sorting,+filtering,+limiting+clicks+to+zones...
</script>|216403|entityMap^0|2I|7|0|0|0|J|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

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

<pre><code>&lt;!-- centered layout extension http://isotope.metafizzy.co/ --&gt; 

&lt;script type="text/javascript"&gt;
$.Isotope.prototype._getCenteredMasonryColumns = function() {

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

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

 var colW = this.options.masonry &amp;&amp; this.options.masonry.columnWidth || // i.e. options.masonry &amp;&amp; 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;
 };
};
&lt;/script&gt;
</code></pre>

And then you just set up Isotope as usual

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

<blockquote>
 Possible Duplicate: 
 <a href="https://stackoverflow.com/questions/114543/how-to-center-div-in-div">How to center DIV in DIV?</a> 
</blockquote>



Please take a look at the image below:

<img src="https://i.stack.imgur.com/y83kS.png" alt="enter image description here">

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.

Thanks in advance.

<img src="https://i.stack.imgur.com/wZU4s.png" alt="enter image description here">
<img src="https://i.stack.imgur.com/XRliv.png" alt="enter image description here">

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.

jQuery isotope centering

容器

 可能重复：请看下图：​​如何使灰色方块在红色容器div内水平居中？这都是用同位素做的，所以请记住这一点。提前谢谢。​​即使父(红色) div总是在中间对齐，灰色的较小的div也不是。在上图中，当它们在一列中对齐时，该列应该正好位于包装器(红色) div的中间。

问jQuery同位素定心
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery同位素定心EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery同位素定心
EN