我昨天发布了这个，但似乎有些混乱。所以我再次发布它，并且这次会尝试更清楚。

我是这个 wordpress 主题的忠实粉丝：http: //prothemeus.com/demo/litho/，原因如下：

1. 它定位和缩放内容图块以始终 100% 填充浏览器窗口
2. 在调整浏览器窗口大小时，它会重新定位和重新缩放这些图块，以便它仍然 100% 填充浏览器窗口
3. 调整浏览器窗口大小时，图块的运动是流畅的。瓷砖之间没有间隙，它对这一切都有很好的作用。我喜欢的。
4. 瓷砖永远不会小于一定数量，比如 240 像素宽。一旦它们小于 240 像素，网格就会重新排列图块，以便每行中的图块更少。（很难解释这一点，但请使用浏览器窗口的大小，希望您能明白我的意思）

关于这个主题对我不起作用的事情：

1. 无法显示不同大小的内容图块。这对我来说很关键，因为我想提请注意某些帖子。具体来说，特色帖子图块的宽度和高度是常规帖子图块的两倍。

因此，我通过剥离 Litho 主题的 javascript、重命名节点和容器等来自定义主题。并将其全部替换为 Packery 库，这些库现在定位我的内容图块：

然而，虽然这允许我拥有不同大小的内容，但它现在已经失去了流畅的定位。

Packery 有没有办法复制 Litho 主题最初的效果？

我环顾四周，发现最接近的是：

http://codepen.io/desandro/pen/BEJhd

然而，它没有完全相同的运动，它更笨重，也不那么美观。瓷砖之间有重叠，或瓷砖之间形成间隙。

我相信不同之处在于瓷砖都先重新缩放，然后只重新定位一次。而光刻主题会同时重新缩放和重新定位瓷砖，这看起来要好得多。

其次，瓷砖没有最小尺寸，当调整浏览器窗口的大小时，它们只会缩小。

（我知道这些操作在不同的浏览器中可能略有不同，但这是我在使用 Safari、Firefox 和 Chrome 的 Mac 上看到的）

所以我的问题是，有没有一种方法可以复制 Litho 主题的重新定位和重新缩放操作，但使用 Packery 库？Packery 库是否允许这样做？

谢谢

我在现场使用 Packery 进行自动调整图像：http: //jsfiddle.net/tryjkvg3/

有时图像会这样显示：

正确的是：

但是，如果调整窗口大小，图像会调整并保持正常。如何强制图像每次显示正确而不在窗口中调整大小

我需要帮助理解为什么第一组代码有效，而第二组代码无效。

在第一组代码中，我能够拖放元素并在拖动时仍然将它们保留在Packery流中，这是该tree.packery()行的结果。在第二个代码中，这不起作用，这意味着当我拖动元素时，它们不会按顺序回退。

唯一的区别是在第一组代码中，draggable()andtree.packery()方法放在了 imagesLoaded 的结束标记中。困扰我的是为什么这对工作来说是必要的tree.packery()？

1 tree.packery()在 imagesLoaded 的结束标记内

2 不在imagesLoaded 的结束标记tree.packery()内

我需要在我的 ember-cli 项目中使用它们。

如何开始？

我在终端中写道：

bower install isotope --save

然后在我的ember-cli-build.js 中添加了app.import ecc...，但后来我不知道该怎么做。

在哪里放置我的初始化脚本，如下所示：

如果我把它放在application.hbs中，它会给我一个错误，当我用它改变路线时，{{#link-to}}它就不再起作用了。

该怎么办？

在网络上，关于此的资源并不多。

我无法在一堆其他 div 中随机插入 div（广告横幅）。

我从这个问题中找到了我正在使用的工作示例：Insert a div in a random location in a list of divs

但是，我的模板被插入其中一个项目/子项，而不是它的外部容器/目标。

这是我的html：

JS

这就是我在输出中得到的：（通知.item-inner-wrapper放在最后一个.item，而不是它的父.item放在里面.listings）

我在这里做错了什么？

我正在尝试弄清楚如何让 Vue 监听自定义事件（拖放）。例如我需要运行这个事件：

Packery 库事件 http://packery.metafizzy.co/events.html

我的代码：http ://codepen.io/Monocle/pen/ZbeBGL

以及如何根据 DOM 的变化更新 $data （在重新排序元素之后）？

我正在尝试使用Packery构建带有可拖动小部件的仪表板（使用Draggabilly进行拖动）。小部件的宽度由Bootstrap类确定，以响应各种屏幕尺寸。我也在使用jQuery来抓取元素和东西。

CodePen 链接

HTML 片段

CSS 片段

JavaScript 代码段

就目前而言，小部件是可拖动的，但我需要它们捕捉到某种网格。目前，它们可以放置在任何地方，这使得定位很奇怪。

我试图弄清楚如何让它们捕捉到 Bootstrap 的网格列。理想情况下，我认为我希望元素捕捉到最近的 col-*-1。虽然不知道如何处理高度。

我尝试将columnWidth设置为虚拟元素的选择器，但我无法让它工作。

我有一个博客大小，可以将博客标题和特色图片放入块中。

然后，这些块由 Packery.js 组织，以便它们平铺在视口的宽度上，并且每个之间没有空格。

这在除 Safari 之外的所有经过测试的浏览器中都表现良好，它会将所有 div 混杂在一起。

你以前见过这个吗？您对可能的解决方案有何建议？

设置是：

有没有人成功克服了这个渲染问题？我尝试了一些解决方案，包括：

https://github.com/metafizzy/packery/issues/134

https://github.com/metafizzy/packery/issues/44

最奇怪的是，当您手动调整视口大小时，行为是我所期望的，所有项目都打包并堆叠在一起。

将不胜感激找到任何解决方法，以便该网站在 Safari 中看起来合理......谢谢！

是否可以创建诸如 Packery 之类的砌体网格，但使用通过 CSS 或 SVG 完成的三角形？我能够成功地做到这一点，但是将三角形彼此对齐以便没有间隙似乎是一个挑战。

我有以下内容：

.item表示一个等边三角形，.ud该类只是将其颠倒过来。我的第一个想法是只使用负边距来拉动每个旁边的三角形。但是三角形的大小会有所不同。

我有一个类似于下图的布局，我正在使用 Packery 来获取。我也在用 jquery 计算高 div 的高度。

第二次加载或刷新页面时一切正常。在第一次加载时，不计算高 div 的高度，因此 packery 将我的图像放在彼此的顶部（在 chrome 中）。在 Firefox 中，创建了一个奇怪的空白空间，并且元素位于该空间周围。我不知道如何解决这个问题。

我的 JS（按建议修改）：

和 HTML：

我正在为网格使用引导程序并使用 angular.js。如果我不调整#talldiv 的大小并让它保持不变，则网格可以正常工作，但显然我不能这样做，因为它需要等于接下来的两个兄弟姐妹的高度。我究竟做错了什么？