jQuery：結合「可過濾的投資組合」和砌體佈局

我試圖將「可過濾的投資組合」（http://net.tutsplus.com/tutorials/javascript-ajax/creating-a-filterable-portfolio-with-jquery/）與砌體佈局相結合......所以我希望我的物品在我過濾後用石工重新調整，但他們留在masonery把它們的位置...jQuery：結合「可過濾的投資組合」和砌體佈局

，這裏是我非常粗糙的第一個網站草案：http://waynetest.kilu.de/lula/ （工作明顯進展..;））

是否有兩個JS-腳本合併的可能性？

非常感謝，卡塔琳娜

來源

2010-02-16 katharina

-1

我想同樣的事情，終於等來了它的工作。

參見：http://jasondaydesign.com/masonry_demo/

希望這對您的需求的作品。

來源

2010-05-14 19:18:41 Jason

鏈接已死亡。請在堆棧溢出處張貼代碼或截圖，否則內容會丟失。 – jpierson 2011-01-28 19:43:57

在http://thinquetanque.com看到它 - 會有一些其他的更新 - 但現在，它是。 – Jason 2011-02-02 16:48:58

傑森，更新問題，而不是與新鏈接的評論。 – 2012-11-12 18:08:36

你總是可以嘗試http://isotope.metafizzy.co/

來源

2011-07-19 14:57:52 thugsb

首先創建一個隱藏的div，把真實的數據給它。在這個例子中，我們將其稱爲#hidden。然後爲主砌體創建一個空白的div。我們稱之爲#masonry。因此，我們有這樣的事情至今：

<div id="hidden"> ... CONTAINING THE ACTUAL DATA ... </div> 
<div id="masonry"></div> <!-- which is a blank div -->

的項目將通過其數據相對被檢測到，所以不要忘了所有的過濾器作爲數據-rel來的項目。例如：

<div class="work" data-rel="Template Design">CONTENT</div>

作爲過濾器，創建這樣的列表：

<ul id="port_filter"> 
    <li data-rel="all" class="active">All</li> 
    <li data-rel="Graphic Design">Graphic Design</li> 
    <li data-rel="Template Design">Template Design</li> 
    <li data-rel="Programming">Programming</li> 
</ul>

現在，處理在初始填充和過濾功能是這樣的：

// Initial loading 
var all = $('#hidden .work'); 
$('#masonry').html(all); 
$('#masonry').masonry({ 
    itemSelector: '.work', 
    columnWidth: 299 
}); 

// Portfolio filtering 
$('#port_filter li').click(function(){ 
    if($(this).hasClass('active')) { 
     return; 
    } 
    else { 
     $('#port_filter li').removeClass('active'); 
     var filter = $(this).attr('data-rel'); 
     $(this).addClass('active'); 
     if(filter == 'all') { 
      $('#masonry').html(all); 
      $('#masonry').masonry(); 
     } 
     else { 
      $('#masonry').html('').html(all); 
      removed = null; 
      var removed = $('#masonry .work[data-rel!="' + filter + '"]'); 
      removed.remove(); 
      $('#masonry').masonry(); 
     } 
    } 
});

此方法測試在砌體v4和最好的。

來源

2017-02-01 16:02:19

jQuery：結合「可過濾的投資組合」和砌體佈局

回答

相關問題