做與類別與Twitter的引導選擇流體響應畫廊項目

Question

我試圖做一個負責任的和流體走廊，是這樣的：http://dev-so12.fr/Akram/murals/

通過點擊類別之一，圖像在前看不見或出現讓只有可見類別的圖像。

我想要相同的行爲。我正在使用twitter bootstrap，我嘗試了不同的方式來做到這一點。第一個是與此標記：

<div class="existing liste container-fluid"> 
     <div class="row-fluid"> 
      <div class="span3"> 
       <div class="img"> 
        <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp8.jpg" class="attachment-medium" alt="hp8">   
       </div> 
       <div class="description"> 
        bla 
       </div> 
      </div> 

      <div class="span3"> 
       <div class="img"> 
        <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp6.jpg" class="attachment-medium" alt="hp6">   
       </div> 
       <div class="description"> 
        bla 
       </div> 
      </div> 

      <div class="span3"> 
       <div class="img"> 
        <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp4.jpg" class="attachment-medium" alt="hp4">   
       </div> 
       <div class="description"> 
        blabla 
       </div> 
      </div> 

      <div class="span3"> 
       <div class="img"> 
        <img width="243" height="150" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/hp2.jpg" class="attachment-medium" alt="hp2">   
       </div> 
       <div class="description"> 
        blabla 
       </div> 
      </div> 
      </div><div class="row-fluid"> 
      <div class="span3"> 
       <div class="img"> 
        <img width="243" height="243" src="http://localhost/Sites/FonciereRegion/Site/wp-content/uploads/2013/04/bati1.jpg" class="attachment-medium" alt="bati1"> 
       </div> 
       <div class="description"> 
        blabla 
       </div> 
      </div> 
      </div></div> 

但是，這是每4個圖像的新行所產生的問題，所以如果我刪除一個圖像，它不會有良好的行爲。

的其他標記，我能想到的是相同的，但只有我有一個總的行，然後只span3的div

這種標記的問題是，我不知道如何擺脫保證金第五張圖片和第十張圖片......我可以用一些javascript來做這個訣竅。但是，如果我能避免它，這將是巨大的，因此，如果任何人有任何想法，我將很高興聽到這個消息:)

感謝

Answer 1

你一定要看看Filtrify，一個HTML5和jQuery標籤和過濾插件。它使用HTML5 data-屬性來存儲關於東西的元數據（附加數據），即圖片 - 日期，藝術家，流派，價格等。

它充分記錄了大量的examples。