jQuery同位素：通過用戶控件調整元素的大小？

我正在使用jQuery Isotope，我想知道是否有內置（或至少「簡單」）的方式讓它通過用戶控件（如滑塊）動態調整元素的大小。jQuery同位素：通過用戶控件調整元素的大小？

文檔中有一個fluid/responsive演示，但它基於瀏覽器窗口的大小調整元素的大小。我正在尋找窗口/容器保持相同大小的東西，並且用戶可以通過拖動滑塊（如iPhoto中的縮略圖大小滑塊）來控制元素的大小。

這甚至可能嗎？我一直無法找到以這種方式使用的同位素的任何例子。

2012-05-23 daGUY

你應該試試這個鏈接：http://isotope.metafizzy.co/demos/relayout.html這個例子展示了一個item如何調整onclick的大小，但是你可以調用這段代碼來使它和滑塊一起工作。但據我所知，這個插件使用預定義的寬度和高度通過CSS動畫類，所以你可能會添加很多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」是物品的類別。你應該使用這個事件處理程序的命名函數來綁定並用你的滾動條來調用它。希望有所幫助。

來源

2012-07-24 12:16:59

jQuery同位素：通過用戶控件調整元素的大小？

回答

相關問題