javascript - 自下而上的 jQuery Masonry

Question

有谁知道如何自底向上制作 jQuery 砌体堆栈？我写了一些基本的 JS 来从下往上堆叠东西，但它不能做砖石结构的东西，比如在最短的列上堆叠下一 block 砖和跨越多列的砖。由于我数学不好，看源码简直头晕目眩。

有人想试试吗？

Answer 1

你会 mock 这是多么容易做到，但你需要修改插件(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
    };

然后在defaults中添加选项:

  // 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 });

---

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