從URL過濾同位素

我試圖從url鏈接過濾我的同位素頁面，已經搜索並試圖實現在這裏找到的例子，但無濟於事。從URL過濾同位素

這裏是同位素頁： http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

這裏是我試圖篩選從頁面：http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php

我已經嘗試了數據過濾器，＃和所有的變化？但似乎沒有過濾結果。

任何想法？

來源

2016-03-15 Colin Doherty

同位素不會做到這一點本身，你必須找到自己的解決方案。從本機API過濾方法可以幫助你，但你必須提供

例如，如果您要篩選擁有一類像「冷」

你可以創建一個接受一個頁面元素參數名爲過濾 - 例如：http://www.yourdomain.com/page.html?filter=cold
你要攔截從Javascript的查詢字符串，用一個簡單的函數發現here並將其存儲在一個querystringValue瓦里能夠。

var querystringValue = getParameterByName（'filter'）;
一旦同位素被加載並準備 - 與所有元素，每一個拿着自己的過濾器類 - 你可以使用過濾方法，通過您收到的查詢字符串進行過濾。我會假定$ grid包含對網格對象的引用。

$ grid.isotope（{filter：querystringValue}）;

這只是其中一種可能性，但它的工作原理。您當然應該編寫一個機制來處理無效的可能過濾器的查詢字符串參數。

希望你覺得這個有用。

來源

2016-04-10 00:44:33 theCodeSurgeon

該解決方案的工作100％

例如
，如果你想通過從不同勢網頁過濾器類然後寫出如下 http://www.dotsdesign.tv/ipltest/rs-mobile-plinth.php#infographic

的同位素本頁面 http://www.dotsdesign.tv/ipltest/rs-case-studies-grid.php

<ul class="filters"> 
    <li class="filter selected"><a href="#" data-filter="*">All</a></li><br> 
    <li class="filter"><a href="#" data-filter=".isotope-category- 
    infographic">Infographic</a></li> 
    <li class="filter"><a href="#" data-filter=".isotope-category- 
    motiongraphic">Motion graphic</a></li> 
</ul> 

<ul id="portfolio" class="masonry-grid "> 
    <li class="masonry-grid-item isotope-category-infographic">infographic 
    data</li> 
    <li masonry-grid-item isotope-category-motiongraphic>motion graphic 
    data</li> 
</ul>

現在在jquery中寫下如下代碼：

$(window).load(function(){ 
    var hashID = window.location.hash.substring(1); 

    /*$container is an isotope container.it may be different 
    a container is a wrapper for filter data 
    here is masonry-grid is a container*/ 

    $container.isotope({ filter: ".isotope-category-"+hashID }); 

    /*other filter selected logic you can apply to your HTML structure here*/ 

});

來源

2017-07-24 12:06:54

從URL過濾同位素

回答

相關問題