javascript - jQuery Masonry 自下而上

Question

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

有人想试试吗？

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 上分叉了存储库，所以如果你不想自己做，可以下载更改。