jquery - Isotope Issue: Masonry Column Width Twice as large as it was defined in code

Question

This is very weird and very throughouly researched on the web by me. I didn't find any solutions.

The jQuery says:

$container.isotope({ itemSelector : '.post', masonry: { columnWidth: 250, }
});

The .post's style says:

.post { width:250px; }

When Isotope defines the .post's positions, the second column is positioned 500px from the left of the page. The third column, 1000px from the left of the page. It's like each column is getting width of 500px.

The link is: http://asimob.tv

Getting bald and hypertensive with this. I would really, really appreciate some help. Please!

Answer 1

我有同样的问题，似乎“columnWidth”属性不仅仅是元素的宽度（例如.post），而是宽度+边距。

所以 columnWidth 应该等于元素宽度 + (margin x 2)。

希望这可能对偶然发现此问题的人有所帮助。

Answer 2

启动 Isotope 时，删除选项部分中的 columnWidth:250。