当前位置：文江博客话题详情

用同位素重新布局项目，似乎无法维持结构

发布于 2024-10-19 02:52:43 字数 509 浏览 3 评论 0原文

我一直在玩同位素 http://isotope.metafizzy.co/demos/relayout.html 并一直在尝试创建一个保持固定大小的父容器，总是有 6 个较小的项目，并重新调整以适应第 7 个较大的项目。

这是我到目前为止在 jsfiddle 上得到的内容 http://jsfiddle.net/pedalpete/LGBg6/

我希望发生的是点击后在任何块上，任何一行中较小块的总数将为 3。

出于某种原因，无论是用户 .isotope('resize')，还是像我一样重新创建同位素，我最终会得到一个数字顶行大于 3，因此项目排序不均匀。

我原以为，诉诸之后，安排会有些静态。有没有办法让同位素服从绑定盒的宽度和高度参数？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风吹雨成花 2024-10-26 02:52:43

请参阅 http://jsfiddle.net/desandro/S5vAG/ 了解我的解决方案。

有没有办法让同位素服从绑定盒的宽度和高度参数？

第一步是禁用 Isotope 调整容器大小。设置 resizesContainer 选项 false。

现在，为了将这些块安装到容器中，有多种方法可以实现。您可以构建自己的布局模式，或者可以尝试进行排序。这是我采用的解决方案。

我还使用了不同的布局模式，fitColumns，我认为它更适合您的需求。使用 getSortData 参数，其逻辑是，如果该项目具有 large 类并且是偶数项目，则它将被推回下一列。因此，当 2、4、6 很大时，它们都会被放置在下一列中。

getSortData : {
  fitOrder : function( $item ) {
    var order,
        index = $item.index();

    if ( $item.hasClass('large') && index % 2 ) {
      order = index + 1.5;
    } else {
      order = index;
    }
    return order;
  }
},

See http://jsfiddle.net/desandro/S5vAG/ for my solution.

Is there a way to have isotope obey the width and height parameters of the binding box??

The first step is to disable Isotope resizing the container. Set the resizesContainer option false.

Now to accomplish fitting those blocks into the container, there are several ways to do this. You could build your own layoutMode, or you could try playing around with sorting. This is the solution I employed.

I also used a different layoutMode, fitColumns, which I think better suits what you're going for. Using the getSortData parameter, the logic is that if the item has a class of large AND is an even item, then it gets pushed back into the next column. So 2, 4, 6 all get placed in the next column when they are big.

getSortData : {
  fitOrder : function( $item ) {
    var order,
        index = $item.index();

    if ( $item.hasClass('large') && index % 2 ) {
      order = index + 1.5;
    } else {
      order = index;
    }
    return order;
  }
},

回复收藏 0 原文

~没有更多了~