如何在同位素開始重新佈局轉換之前調用函數？

我已經得到了一個我想用同位素過濾的圖片。我想轉換的元素沒有「明確」的大小，但大小取決於網格中的位置。網格看起來像這樣：如何在同位素開始重新佈局轉換之前調用函數？

———————————————-——————————————— 
|    |    | 
|    |    | 
———————————————-——————————————— 
|   |   |   | 
|   |   |   | 
—————————-———————————-————————— 
|    |    | 
|    |    | 
———————————————-——————————————— 
|   |   |   | 
|   |   |   | 
—————————-———————————-—————————

它有兩個交替行模式。應用過濾器後，網格應該仍然具有相同的佈局模式（當然只有更少的元素）。例如，位於第3個位置（第2行第1個位置）的元素現在可以位於第1行的第1個位置，因此具有新的大小。爲了實現這種佈局，我有5個類（'瓷磚-1'到'瓷磚-5'），它們都具有適用於它們的特定樣式，用於正確的邊距和邊距。

我現在的問題是，我不知道如何應用正確的類之前，同位素做佈局時，應用過濾器。我沒有找到任何beforeLayout()函數或類似的東西。我試圖用jQuery的回調函數至極被稱爲上的動畫像這樣開頭：

$filters.on('click', '.filter', function() { 
    var filterVal = $(this).attr('data-filter'); 
    $galery.isotope({ 
     filter: filterVal, 
     animationEngine: 'jquery', 
     animationOptions: { 
      start: function() { 
       //code that applies correct tile classes 
      } 
     } 
    }); 
}

但不知何故，這不工作或者因爲功能甚至不被調用，即使我強制animationEngine是'jquery'。我無論如何不知道這是否會起作用，因爲我相信同位素在調用jQuery動畫之前就是內部佈局。

任何幫助歡迎！

來源

2014-03-26 Flavio

我不熟悉同位素，但你有沒有試過用'畫廊'而不是'Galery'？ – Kvothe

@Kvothe呃這是我英語不好的拼寫，但與同位素無關。那就是我定義的一個常規js變量，它保存了一個jQuery對象。 – Flavio

啊對，沒有剩下的代碼很難判斷，你能提供更多/全部代碼嗎？ – Kvothe

編輯：我意識到我的jsfiddle在Firefox中看起來很奇怪，因爲我設置了填充，現在修復了。

這可能會幫助，請參閱：http://jsfiddle.net/6st8N/4/

我假設你的HTML看起來像這樣在第一... wide-2，wide-3定義的寬度（如果你的代碼是不同的，請提供它的一個例子）。

<div id="filters" class="button-group"> 
    <button data-filter="*">show all</button> 
    <button data-filter=".metal">metal</button> 
    <button data-filter=".non-metal">non-metal</button> 
</div> 


<div id="grid"> 
    <div class="grid-item wide-3 metal"> 
     <div class="grid-item-inner">1</div> 
    </div> 
    <div class="grid-item wide-3 non-metal"> 
     <div class="grid-item-inner">2</div> 
    </div> 
    <div class="grid-item wide-2 metal"> 
     <div class="grid-item-inner">3</div> 
    </div> 
    <div class="grid-item wide-2 non-metal"> 
     <div class="grid-item-inner">4</div> 
    </div> 
     <div class="grid-item wide-2 non-metal"> 
     <div class="grid-item-inner">5</div> 
    </div> 

    ...

過濾器被點擊後，便刪除了通過每個匹配電網項目涉及到的寬度，然後循環目前所有的類和重新分配的類...

$('#filters').on('click', 'button', function() { 
    var filterValue = $(this).attr('data-filter'); 

    var newItemCounter = 1; 

    $('#grid').children(filterValue).each(function() { 
     $(this).removeClass('wide-2'); 
     $(this).removeClass('wide-3'); 

     if((newItemCounter + 4)%5 == 0 || (newItemCounter +3)%5 == 0) { 
      // 1st or second in pattern of 5 
      $(this).addClass('wide-3'); 
     } 

     else { 
      // 3rd, 4th or 5th in pattern of 5 
      $(this).addClass('wide-2'); 
     } 

     newItemCounter++; 

    }) 

    $container.isotope({ filter: filterValue }); 

});

來源

2014-03-27 00:04:24 Sarah

如何在同位素開始重新佈局轉換之前調用函數？

回答

相關問題