问题标签 [jquery-masonry]

我在页面上有基本的照片布局（用于投资组合）。有两种不同大小的图像块，较大的与较小的成正比，宽度和高度正好是两倍，块或窗口之间没有边距。只有几个较大的块与几十个较小的块混合在一起。它是一种响应式设计，因此在全尺寸网站上有 5 个 20% 的列，当窗口大小下降到某个宽度以下时，它有 3 个 33.333% 的列，所有这些都在 100% 最大宽度的容器内。图像在每个砖块内使用 CSS 设置为 100% 宽度和自动高度。我已经包含了一个线框来说明我所描述的内容。

我遇到的问题是让同位素响应流体布局。如果我在比最大宽度更宽的窗口中加载页面，它会完全按照预期放置块。但是，当我将浏览器窗口缩小到最大宽度以下时，这些块开始变得非常不稳定，有以下几种变化：堆叠成两列，中间有一个空列；图像之间的间隙；在大图像下方留下一个空行。

我可能没有很好地解释自己，但只是想知道是否有人有使用 Isotope 与流体布局的经验并且可能有一些见识。

我是编程（javascript）的新手，但过去几天我做了很多研究，以使我的 tumblr 主题正常工作。我知道我的问题很常见，但似乎我没有足够的知识来正确集成许多类似示例中给出的代码部分。

我的主题应该覆盖 tumblr 的“每页 15 个帖子”限制，并使用“无限滚动”选项，它应该将我所有的帖子（全部是图片）放在一个无限的页面中。嗯，它没有。在here的一些帮助下，我设法用 masonry() 调用中的几个随机更改包装了我的 {block:Posts} 我最终得到了这个

如您所见，我的图片没有重叠（终于！），但是在第 15 篇文章之后，它看起来像是创建了一个新页面，并且最后一张图片没有正确对齐。

我的 jQuery 砌体代码是这样的：

我知道，它一团糟......非常感谢一些帮助。

由于最近情况有所好转，我再次开始研究我的投资组合。它仍然很新鲜，但我可以对图像的 jquery .load() 使用一些帮助。

http://progress.patrikarvidsson.com/

我正在使用带有 html5boilerplate 的 jQuery；除此之外，我还有 Masonry 和 Lightbox。我不怀疑灰度代码是罪魁祸首，所以我不会在这里包含它。下面是我的 scripts.js 文件的顶部（在灰度代码之后）。

Html 看起来像这样（结构仍然遵循 html5boilerplate。JS 文件在之后，但modernizr 在之前）

fadeIn() 有效，但不是我想要的。首先加载图像，然后在加载文档时自动隐藏它们，然后淡入生效。如果您访问上面的链接，您可能会看到它。基本上，对我来说它看起来像这样。

每次我点击刷新时都会发生这种情况。请注意，这是在 Chrome 中，淡入在 Firefox 中根本不起作用，但我还没有在我的另一台计算机上测试过。最后，我无法弄清楚问题是什么。

更新

我决定改用css3-animation。它工作得很好，但我还没有看到它在旧浏览器中的外观。

虽然，我仍然很好奇为什么会出现这个问题。所以仍然鼓励回答！

我对脚本 jQuery Masonry 有疑问。这是关于堆叠盒子 - 目前水平排列它们，限制在宽度上。然而，Chciałym 仅限于关卡并在关卡中以相同的方式排列，允许水平滚动。我不知道该怎么做，据我所见，他们的网站上没有这样的解决方案

我正在尝试实现一种布局，其中项目会像报纸/杂志文章部分一样浮动。这与jQuery 的 Masonry所做的类似。但我试图仅使用 CSS3 来实现这一目标。我想也许box显示属性可以做到这一点。尽管在尝试了几次之后，我无法使项目在父列宽度满足后向下滑动。

有没有办法只使用 CSS 来实现这种布局？

标记将是这样的：

在这里，一个部分将向左浮动并在更适合的列队列上调整自身（而不是像简单浮动那样低于前一个的基线）。

我遇到了他们网站的 Masonry 帮助部分解决的重叠问题。但是，我只在 Firefox 中看到了这种情况，而且似乎是在我更新到 FF 8 之后才发生的。我通过使用 $(window).load 而不是 imagesLoaded 插件（它没有在 IE 中工作）。直到今天，无限卷轴 + Masonry 在 FF 中完美运行。当 imagesLoaded 插件和 $(window).load 都没有解决问题时，还有其他解决重叠问题的建议吗？

I want to hide my content until Masonry has had a chance to style it (to prevent the dreaded flash of unstyled content), and then hide the loader gif . Here is a code snippet:

However, I notice that when .show() is called, Masonry hasn't been applied to the content. I know in this question, the creator of Masonry suggested that there isn't good support for Masonry callbacks right now. Has anyone come up with a decent workaround?

Thanks!

砌体插件将砖块堆叠成柱子。这是对砖块的重新排序，以最小化列。它如何对比列宽更宽的砖进行排序？

我正在开发一个包含 3 列词汇表页面的 Wordpress 项目。我正在尝试使用 Masonry 将所有条目很好地组合在一起，这几乎可以工作，但并不完全。

这是有问题的页面：http ://ratherbrilliant.com/staging/starstruck/category/glossary/browse-A/

这是一个常见的 Wordpress 设置，这意味着容器 div 中嵌套了许多文章。

文章是百分比宽度和浮动：

我只使用了默认的 Masonry 设置，尽管我已经尝试了各种选项来让它工作。

它几乎可以工作了，但是如果向下滚动，您会看到第一个条目与其下方的条目之间存在巨大差距。我根本无法让它发挥作用。任何帮助将不胜感激。

谢谢！

有没有办法让 jquery masonry 使用百分比宽度 div？我正在尝试创建具有 25%、50%、75% 和 100% 宽度的流畅布局。但是，一旦我用 % 设置宽度，自动调整大小就会停止工作，如果我尝试手动触发 mason onresize，我会得到舍入错误，导致 div 跳来跳去。此外，它有时会忽略高度，有时只是停止放置 div 并将它们全部放在 0,0

HTML 标记：

CSS 属性：

Muchos gracias 对于任何输入，J