[awei研究室]流瀑網頁版型(jQuery Masonry圖片網站)

2014.12.09 / 分類: awei研究室, 網頁版型 / 0 則回應

標籤: jQuery Masonry, 瀑布流, 版型

有不少的網站，將網站中的 CSS Div區塊，隨著Div的高度，自動的向下編排，看起來很像瀑布川流而下的感覺，瀑布流版型，很像是CSS的浮動排版一樣，圖片會依照大小進行縮放排列，如果搭配響應式網頁的規畫，則可以依照畫面的大小進行縮放。

Masonry瀑布流版型：jQuery Masonry

如果依照原廠英文網頁教學~~會非常的霧殺殺~~~建議您可以下載他的原始檔案來個個破解
記註一定要下載他的masonry.pkgd.min.js

做好的感覺大概會是這樣

範例網頁

引用Jquery+jQuery Masonry

放在<head>…..</head>之間

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://masonry.desandro.com/jquery.masonry.min.js"></script>

HTML：

放在<body>…..</body>之間

<div id="_container" style="height:800px; width:728px; overflow:hidden; margin:0 auto;">         
     <div class="content_box">內容1</div>
     <div class="content_box">內容2</div>
     <div class="content_box">內容3</div>
     <div class="content_box">內容4</div>
     <div class="content_box">內容5</div>
     <div class="content_box">內容6</div>
</div>

CSS樣式設定：

放在<head>…..</head>之間

<style>
.content_box{
	display: inline-block;
	border: 1px dotted #4F4F4F;
	padding: 10px;
	margin: 5px 5px 5px 0;
	overflow:hidden;
	width:337px;
}
</style>

啟用Jquery Masonry元件(放在<script>…..</script>之下：)

$(function(){
	$('#_container').imagesLoaded(function () {
        $('#_container').masonry({        
            itemSelector: '.content_box',
            columnWidth: 364,
            animate:true
        });
	});
});

檔案下載