jQuery砖石从下到上 [英] jQuery Masonry from bottom up

问题描述

有谁知道如何使jQuery砖石堆栈从下到上？我写了一些基本的JS从底部向上堆栈的东西，但它不能做砌体的东西，如堆积下一个砖在最短的列和砖跨多列。因为我不喜欢数学，看着源代码只是让我头晕。

Does anyone know how to make jQuery masonry stack from the bottom up? I wrote some rudimentary JS to stack things from bottom up but it couldn't do masonryish stuff like stacking the next brick on the shortest column and bricks that span multiple columns. Since I'm not good with Math, looking at the source code just makes me dizzy.

任何人都想试试？

推荐答案

你会笑得这么容易，但你需要修改插件（ demo

You're going to laugh at how easy this is to do, but you will need to modify the plugin (demo).

基本上，我改变了82 - 85行（所有需要更改的是 top 到底部，但我添加了这两个，所以你可以来回切换）：

Basically, I changed line 82 - 85 from this (all that needed changing was top to bottom but I added both so you can switch back and forth):

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

然后在默认值中添加选项：

Then added the option in the 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: {}
  };

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

Now you can just use the plugin like this:

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

---

更新：还可以在github上分配存储库，因此，如果您不想自己执行更改，则可以下载更改。

---

Update: I also forked the repository on github, so you can just download the changes if you don't want to do them yourself.

这篇关于jQuery砖石从下到上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！