• Normalize.css 来替代传统的 CSS 复位；
• ZURB Foundation 创建具有响应式的网格；
• Masonry 创建一个动态的网格布局；
• imagesLoaded 检查是否已加载图像；
• Infinite Scroll 加载更多图片并追加到画廊。

<div class="row"><div class="large-12 columns main"><ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3 masonry"><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/01.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/02.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/03.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/04.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#/"><img src="data:images/05.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/06.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/07.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/08.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/09.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/10.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/11.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/12.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#/"><img src="data:images/13.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/14.jpg" alt="" /></a></li><li class="masonry-item"><a target="_blank" href="#"><img src="data:images/15.jpg" alt="" /></a></li></ul><ul class="pagination"><li><a class="next" href="index-02.php">Next Page</a></li></ul><div class="loading"></div></div><!-- End .main -->
</div><!-- End .row -->

@keyframes tada
{0%{-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);}10%,20%{-webkit-transform: scale(.8) rotate(-2deg);-moz-transform: scale(.8) rotate(-2deg);-ms-transform: scale(.8) rotate(-2deg);-o-transform: scale(.8) rotate(-2deg);transform: scale(.8) rotate(-2deg);}30%,50%,70%,90%{-webkit-transform: scale(1.04) rotate(2deg);-moz-transform: scale(1.04) rotate(2deg);-ms-transform: scale(1.04) rotate(2deg);-o-transform: scale(1.04) rotate(2deg);transform: scale(1.04) rotate(2deg);}40%,60%,80%{-webkit-transform: scale(1.04) rotate(-2deg);-moz-transform: scale(1.04) rotate(-2deg);-ms-transform: scale(1.04) rotate(-2deg);-o-transform: scale(1.04) rotate(-2deg);transform: scale(1.04) rotate(-2deg);}100%{-webkit-transform: scale(1) rotate(0);-moz-transform: scale(1) rotate(0);-ms-transform: scale(1) rotate(0);-o-transform: scale(1) rotate(0);transform: scale(1) rotate(0);}
}.tada
{-webkit-animation-name: tada;-moz-animation-name: tada;animation-name: tada;
}

jQuery(document).ready(function($) {// Replace "tada" with an effect from the "effects.css" file.var effect = 'animate tada';var masonry_selector = '.masonry';var masonry_item_selector = '.masonry-item';// Initialize Masonry.var $masonry = $(masonry_selector).masonry({itemSelector: masonry_item_selector});// Find and hide the items.var $masonry_items = $masonry.find(masonry_item_selector).hide();// Wait for the images to load.$masonry.imagesLoaded()// An image has been loaded..progress(function(instance, image) {// Add the effect.var $image = $(image.img).addClass(effect);// Find and show the item.var $item = $image.parents(masonry_item_selector).show();// Lay out Masonry.$masonry.masonry();});// Load more items.$masonry.infinitescroll({navSelector: '.pagination',nextSelector: '.pagination .next',itemSelector: masonry_item_selector,loading: {finishedMsg: 'No more pages to load.',img: 'images/loader.gif',msgText: 'Loading the next page.',selector: '.loading'}}, function(items, data, url) {var $items = $(items).hide().imagesLoaded().progress(function(instance, image) {var $image = $(image.img).addClass(effect);var $item = $image.parents(masonry_item_selector).addClass('infinite-scroll-item').show();$masonry.masonry('appended', $item);});});});

• Web 开发中很实用的10个效果【源码下载】
• 精心挑选的优秀jQuery Ajax分页插件和教程
• 12个让人惊叹的的创意的 404 错误页面设计
• 让网站动起来！12款优秀的 jQuery 动画插件
• 十分惊艳的8个 HTML5 & JavaScript 特效