Blueprint:Google风格的网格布局css画廊

Blueprint是一款响应式的css画廊。它的灵感来自于Google的Chromebook Getting Started guide。Blueprint css画廊的网格布局采用时下流行的Masonry构建，画廊图片的运动效果则由CSS 3D transforms完成。

HTML

<div id="grid-gallery" class="grid-gallery">
	<section class="grid-wrap">
		<ul class="grid">
			<li class="grid-sizer"></li><!-- for Masonry column width -->
			<li>
				<figure>
					<img src="img/thumb/1.png" alt="img01"/>
					<figcaption><h3>Letterpress asymmetrical</h3><p>Chillwave hoodie ea gentrify aute sriracha consequat.</p></figcaption>
				</figure>
			</li>
			......
		</ul>
	</section><!-- // grid-wrap -->
	<section class="slideshow">
		<ul>
			<li>
				<figure>
					<figcaption>
						<h3>Letterpress asymmetrical</h3>
						<p>Kale chips lomo biodiesel stumptown Godard Tumblr, mustache sriracha tattooed cray aute slow-carb placeat delectus. Letterpress asymmetrical fanny pack art party est pour-over skateboard anim quis, ullamco craft beer.</p>
					</figcaption>
					<img src="img/large/1.png" alt="img01"/>
				</figure>
			</li>
			......
		</ul>
		<nav>
			<span class="icon nav-prev"></span>
			<span class="icon nav-next"></span>
			<span class="icon nav-close"></span>
		</nav>
		<div class="info-keys icon">Navigate with arrow keys</div>
	</section><!-- // slideshow -->
</div><!-- // grid-gallery -->
    

调用javascript代码

首先要引入必要的js文件

<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpGridGallery.js"></script>
    

<script>
	new CBPGridGallery( document.getElementById( 'grid-gallery' ) );
</script>
    

更详细的教程请参看《》