问题标签 [masonry]

目前，我正在开发一个由多个此类磁贴系统组成的网站，您可以在下面看到。

我想知道哪种方式对它们进行编码最好。

我使用了 Masonry，它工作得很好，但它是一个基于 jQuery 的解决方案。 http://jsfiddle.net/xfxYQ/

HTML

CSS

砌体 jQuery

有人对纯 HTML/CSS 解决方案有聪明的想法吗？

我在我的 rails 应用程序中使用引导选项卡窗格。在每个选项卡中，我想使用 Masonry GEM。然而，所有的物品都堆叠在彼此的顶部。

如果我调整页面大小，它们会以我希望的方式并排显示。我怎样才能让它一直这样显示？

同样作为仅供参考，当我使用不在选项卡窗格内的类似代码时，一切正常。

在Masonry 的文档中，它说要使用基于百分比的宽度，您应该使用 CSS 类来定义它，即

但是，每次所有块堆叠在一起时，尝试这样做似乎都会破坏我的布局。这是一个 Codepen 演示。

关于这里出了什么问题的任何想法？

我正在尝试在一个响应式网站上一起制作砌体和延迟加载，其中砌体的集团以 % 为单位。我已经阅读了关于这个主题的所有其他帖子，包括这个特定的帖子： Combining LazyLoad and Jquery Masonry

我已经应用了这篇文章的第一种方法，（除了我必须更改“重新加载”行，因为它在我的网站上不起作用。不知道为什么。）第二种方法看起来也很棒；但它对我来说似乎很复杂。我不知道如何从服务器传达图像大小......

所以最后我得到了这个结果： http ://test.cas-p.net/-Pipolass-

使用此代码：

它看起来在 Firefox 上运行良好。但是在 chrome 和 safari 上我遇到了一些麻烦：

在页面的末尾，我的容器与页脚重叠，有时，一个图像与另一个图像重叠。（通常在页面末尾）

值得一提的是，在两次野生动物园中，所有图像都会重叠，直到您向下滚动。（表示第二个砌体调用，在我向下滚动之前不要工作。）

任何人有想法让它在 safari 和 chrome 上更好地工作？

（我现在不尝试使用 IE ......但我很害怕 ^^..）

非常感谢您帮助我，并为我糟糕的英语道歉。

我正在为即将到来的项目进行砌体布局，并想知道它们是否是一种仅使用 CSS 从左到右而不是从上到下排列砌体瓷砖的方法。

我尝试在 jsfiddle 上重新创建布局，但输出看起来不同，所以我决定截屏

http://i255.photobucket.com/albums/hh140/testament1234/Masonry_zps8b8519b6.jpg

HTML

CSS

我正在尝试将 Masonry 与多个可嵌入的推文一起使用。但我遇到了元素相互重叠的问题。

我尝试的一种方法是根据参考指南使用 imagesLoaded 插件，但这不起作用，因为我认为每条推文的 iframe 都没有完全加载。

我只在页面加载后才尝试调用 masonry，但我仍然遇到推文重叠的问题。

我不知道该怎么做，有没有办法在我将可嵌入推文发送给客户端之前找出它的高度，以便我可以将其设置为 iframe 的内联样式。这是从 twitter API 返回的 JSON 数据。

服务器端我正在使用 node.js 和 express

我想在我的代码上使用 Masonry 级联网格布局库，但它不起作用。

样式表：

源代码：

脚本（loggedIn.js）：

我确定地址的完整性，但有什么问题？

编辑：

奇怪的是，当我向代码添加警报时，JS它可以正常工作！

我正在使用砖石来加载大量图像，我对其进行了设置，以便图像逐渐加载（附加）而不是在页面上有大量空白。您可以在此处查看实时版本以帮助说明我的意思。

但是，由于图像正在加载，如果还有更多图像要加载，则不是很清楚。是否可以在底部附加一个 loader.gif 以表明还有更多图像？然后，一旦加载了所有图像，loader.gif 就会消失。

这是我的jQuery：

这是我的 HTML：

更新：

我已在 jquery 中添加以计算图像。他们都在加载时添加了一个加载类，所以这部分工作得很好。但是，加载程序在全部加载后不会隐藏。这是我的jQuery：

我试图让无限滚动与 Masonry 一起工作。

似乎如果我删除 imagesLoaded 函数并只调用砌体，它会显示砌体的图像，但不会无限滚动。

因为它是我得到一个错误：

未捕获的类型错误：未定义不是函数

我正在使用 Foundation，并按以下顺序调用我的脚本：

脚本包括我在开始时突出显示的代码。jQuery 版本是 2.0.3

我有一个网站使用 jquery 的同位素包装器和 html 代码，如下所示：

我正在使用的模板是使用这个 javascript 代码来初始化同位素的东西：

这导致行具有不同位置的“砌体”排列position absolute top。但是，这是不需要的，并且内容元素的高度未知（取决于用户输入）。

我不太熟悉这种同位素/砌体类型的内容，并得到以下问题：我怎样才能给所有article.isotopeItem元素相同的高度（或者至少让每一行都有一条上实线？没有动态添加/删除元素我的情况，因为这一切都是在服务器端完成的，并重新加载了完整的页面。