-2

我试图找到一个 javascript 库来像这里所做的那样为元素设置动画。请看一下介绍，然后从顶部菜单应用一些过滤器，并尝试调整浏览器窗口的大小。

我没有找到任何可以完成像这样的流体布局的东西。那里使用的那种动画有名字吗？你知道它是怎么编码的吗？

4

3 回答 3

13

我是Mountain Dew 网站的首席开发人员。我从头开始编写了整个过滤和网格逻辑，但Isotope是一个非常好的通用库，可以完成你想要的。我没有使用它，因为我有很多特定的需求（主要是因为我必须在单击一个项目后拆分网格）。下面是关于 Mountain Dew 网站上的网格如何工作以及如何完成排序的简化说明。

如果所有项目的大小相同，则逻辑非常简单，您只需要计算一行可以容纳多少项目并相应地定位它们。

var nCols = Math.floor( lineSize / itemWidth );

如果物品的尺寸不同，您可能需要一些打包算法，但对于这种情况，因为我知道可能的尺寸并且它们都适合相同的网格（1x1、1x2、2x2、3x2），并且它们之间有随机间距（没有重叠)，我们也有一些关于产品和促销位置的非常具体的规则，我必须编写自己的算法。对我所做的工作的简化解释（大致是装箱首次拟合算法）：

  1. 获取浏览器窗口尺寸。
  2. 检查我们可以有多少列。
  3. 从数组中获取一个随机项。
  4. 将其插入当前行的下一个可用bin。
  5. 如果它不适合当前行，我们将创建新行，直到我们有足够的bin来容纳该项目。
  6. 根据需要多次重复步骤 3 到 5。

关于激浪网格的一些注意事项：

  • 瓶子不能相邻插入。
  • 如果存储桶被标记为接管，它应该位于网格的顶部。
  • 过滤掉的项目应该放在网格的底部。
  • 在应用任何过滤器后，瓶子可能会被放置在网格上的任何位置。
  • 如果它是网格的最后一行并且我们没有更多项目，则瓶子可以彼此相邻（避免创建不必要的行）。
  • 瓶子应该均匀地分布在网格上，但在伪随机位置上。
  • 网格上的瓶子数量与网格上的物品数量有关（每 12 个物品大约 1 个）。
  • 项目应该是随机间隔的，并且应该尽可能避免重叠（这比项目像常规网格一样定位更难）。

排序是通过稳定排序完成的——Array#sort在 v8 上不稳定，所以我实现了一个稳定的合并排序。只需要遍历数组上的所有项目并执行以下操作：

//native array sort isn't stable on chrome so we use amd-utils instead
grid.items = sort(grid.items, function(item, next){
    // move inactive items to the end of list
    // if return zero it keeps items at the same relative position
    if (next.active) {
        return (item.active)? 0 : 1;
    } else {
        return (item.active)? 0 : -1;
    }
});

在我们决定如何订购物品之后，只需找到物品的正确位置并设置element.style.topand element.style.left：

// positioning can be calculated based on item index if all items have
// same size. not same logic used on mdew since on mdew we have a
// random gutter between items and they shouldn't overlap each other
var colIndex = itemIndex % (nCols - 1);
var rowIndex = Math.floor(itemIndex / nCols);
var destX = colIndex * colWidth;
var destY = rowIndex * rowHeight;

如果浏览器支持 CSS 过渡并且所有项目都具有相同的延迟/持续时间，我们可以在样式表上设置动画：

.grid-item {
    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
            transition: all 500ms ease;
}

但是在 Mountain Dew 网站上，因为我们需要每个项目的随机延迟和持续时间（因为它看起来更好），所以我使用 JavaScript 设置了过渡：

function randomizeSpeed(){
    var delayProp = vendorPrefix.style('transitionDelay');
    var durationProp = vendorPrefix.style('transitionDuration');
    $('.grid-item').each(function(i, el){
        var duration = rand(SLOWEST_TRANSITION, FASTEST_TRANSITION);
        var delay = map(duration, FASTEST_TRANSITION, SLOWEST_TRANSITION, MIN_DELAY, MAX_DELAY);
        if (delayProp) {
            el.style[delayProp] = delay +'s';
            el.style[durationProp] = duration +'s';
        } else {
            // store delay/duration for JS fallback
            $(el).data({ delay: delay, duration: duration });
        }
    });
}

在上面的代码中，我使用方法math/map和random/rand来自amd-utils。我还有一些代码用于根据特征检测获取供应商前缀样式属性 ( mozTransitionDelay, webkitTransitionDelay, )。transitionDelay如果浏览器不支持 CSS 过渡，我会使用一些 JavaScript 来制作动画：

if (USE_TRANSFORM && USE_TRANSITION) {
    el.css({translateY: destY, translateX: destX});
} else if (USE_TRANSITION) {
    el.css({top: destY, left: destX});
} else {
    TweenLite.to(el, el.data('duration'), {
        css : { top : destY, left: destX },
        delay : el.data('delay'),
        ease : Expo.easeOut
    });
}

由于性能原因，我在 IE 7-8 上删除了过渡动画，网格元素太复杂而且我们的项目太多。

于 2012-11-12T14:01:32.317 回答
0

不，要在浏览器调整大小时拥有也适用于触摸设备的自动布局功能，您可以在此处使用此插件。然后，MTN 的东西就是小菜一碟。这个插件可以只是动画、随机化和做 shizzle，但你也可以用它排序、排序和过滤。

于 2012-08-12T19:00:00.413 回答
0

不，山。露码更好。同位素会在网格中间留下孔洞。特别是如果您的细胞像 mt 一样随机组合在一起。露。

于 2013-01-23T18:17:42.217 回答