Question

我正在使用jQuery Isotope，我想知道是否有内置（或至少“简单”）的方式让它通过用户控件（如滑块）动态调整元素大小。

文档中有一个fluid/responsive演示，但它会根据浏览器窗口的大小调整元素大小。我正在寻找窗口/容器保持相同大小的东西，而用户可以通过拖动滑块（如iPhoto中的缩略图大小滑块）来控制元素的大小。

这甚至可能吗？我无法找到以这种方式使用的任何Isotope的例子。

Answer 1

您应该尝试以下链接：http://isotope.metafizzy.co/demos/relayout.html此示例显示项目如何调整大小，但您可以传输此代码以使其适用于滑块。但据我所知，这个插件通过css-classes为其动画使用预定义的宽度和高度，所以你可能会添加很多不同大小的css类，它不会无法工作但我对此不安全。您可能需要动态设置元素的大小。例如，您可以使用以下代码来增加5px宽度和高度的项目大小：

    /* resizing and relayouting the list */
$container.on('click', '.item', function(){
    $this = $(this);
    $this.width( $this.width() + 5);
    $this.height( $this.height() + 5);
    //reorganizes the elements in the list
    $container.isotope('reLayout');

}）;

$ container是你的包装元素而“.item”是一个项目的类。您可能应该使用命名函数为此事件处理程序绑定并使用滚动器调用它。希望有所帮助。

jQuery Isotope：通过用户控件调整元素大小？

1 个答案: