讓你的圖片集像 Google Image Search 般的排版的 jQuery 插件

說明
如果你有一個圖片集裡的相片. 每一張的長跟寬都不一樣, 那排版起來很容易顯得雜亂不堪. 使用這個插件讓你的圖片集有如 ‘Google Image Search’ 般的排版效果.
Demo
- 按 這裡 檢視這個 demo
- 原始碼裡也包含了這個 demo 頁面
下載
- 從 Github 下載原始碼
需求
- jQuery 1.2.6+
支援瀏覽器
- Firefox 2.0+
- Internet Explorer 6+
- Safari 3+
- Opera 10.6+
- Chrome 8+
安裝
- 首先, 確定你使用了一個有效的 DOCTYPE
- 引用 JS 檔案
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type="text/javascript" src="path-to-file/jquery.atteeeeention.js"></script>
- 在你的 stylesheet 裡加入下列 css styles
.clearfix:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix{ display: inline-block; } * html .clearfix{ height: 1%; } .clearfix{ display: block; }
選項
margin
- 說明: space between images( margin-right and margin-bottom )
- 資料型別: integer
- 預設值: 12
- 可能的值: any integer
- 範例程式碼
$( '#gallery' ).atteeeeention({ margin: 20 });
hideLastRow
- 說明: 有時候最後一列的圖片張數會不足一列. 我們可以為了美觀而把最後一列給隱藏起來.
- 資料型別: bool
- 預設值: false
- 可能的值: true, false
- 範例程式碼
$( '#gallery' ).atteeeeention({ hideLastRow: true });
HTML markup
範例程式碼
// this is the markup for $( '#gallery' ).atteeeeention(); <div id="gallery"> <a href="/img/a.jpg"> <img src="/img/a-thumb.jpg"/> </a> <a href="/img/a.jpg"> <img src="/img/a-thumb.jpg"/> </a> <a href="/img/a.jpg"> <img src="/img/a-thumb.jpg"/> </a> .... </div>
- 你可以用 ‘ul’, ‘ol’ 或是任何 block 元素來取代 ‘div’
- 你可以用 ‘class’ 來取代 ‘id’
- 你也可以用 ‘div’, ‘span’ 或任何元素來取代 ‘a’