自下而上的jQuery砌体

Question

有没有人知道如何从下往上制作jQuery砌体堆栈？我写了一些基本的JS来自下而上堆叠东西，但是它不能像在最短的列上堆叠下一块砖和跨越多列的砖块那样做一些粗糙的东西。由于我对Math不熟悉，查看源代码只会让我头晕目眩。

有人想试试吗？

Answer 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，所以如果您不想自己动手更新，可以下载更改。