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

讓你的圖片集像 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’

Related posts