jQuery Masonry 自下而上答案

【问题标题】：jQuery Masonry from bottom upjQuery Masonry 自下而上
【发布时间】：2011-07-09 13:08:45
【问题描述】：

有谁知道如何从下往上制作 jQuery 砌体堆栈？我写了一些基本的 JS 来从下到上堆叠东西，但它不能做像在最短的柱子上堆叠下一块砖和跨越多列的砖块这样的砌体工作。由于我数学不好，看源码就晕了。

有人想试试吗？

【问题讨论】：

如果您要提出挑战，则必须使标准更加明确，以确保获得参赛者。对我来说似乎有点开放的解释......积木来自哪里，它们可以是什么尺寸和形状，理想的目标是平顶吗？不过，我确实喜欢该图表，并为一个很酷的问题 +1。
+1 好问题。其次，要求提供更多细节。

标签： javascript jquery css positioning jquery-masonry

【解决方案1】：

你会嘲笑这很简单，但你需要修改插件 (demo)。

基本上，我从这里更改了第 82 - 85 行（所有需要更改的只是 top 到 bottom，但我添加了两者，以便您可以来回切换）：

    var position = {
      left: props.colW * shortCol + props.posLeft,
      top: minimumY
    };

到这里：

    var position = (opts.fromBottom) ? {
      left: props.colW * shortCol + props.posLeft,
      bottom: minimumY
    } : {
      left: props.colW * shortCol + props.posLeft,
      top: minimumY
    };

然后在默认中添加选项：

  // Default plugin options
  $.fn.masonry.defaults = {
    singleMode: false,
    columnWidth: undefined,
    itemSelector: undefined,
    appendedContent: undefined,
    fromBottom: false, // new option
    saveOptions: true,
    resizeable: true,
    animate: false,
    animationOptions: {}
  };

现在你可以像这样使用插件了：

$('#masonry').masonry({ fromBottom: true });

更新：我也在 github 上forked the repository，所以如果你不想自己做，可以下载更改。

【讨论】：

超级棒！谢谢软糖！另一方面，我添加了另一个父元素，因此我可以将整个堆栈放置在该父元素的底部以模拟重力。 (demo)