自下而上的jQuery砌体

Question

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

有人想试试吗？

Answer 1

你会嘲笑这是多么容易,但你需要修改插件(演示).

基本上,我改变了第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上分配了存储库,所以如果你不想自己做这些更改,你可以下载这些更改.