我目前正在使用https://gist.github.com/gregrickaby/10383879中的代码。当我将这个用于我的tumblr博客时，砌体不能正常工作，而是我的照片之间有空格，如1
这是一份副本＆amp;粘贴代码：
（function（）{
// Main content container
var $container = $('#content');
// Masonry + ImagesLoaded
$container.imagesLoaded(function(){
$container.masonry({
// selector for entry content
itemSelector: '.entry',
columnWidth: 200
});
});
// Infinite Scroll
$container.infinitescroll({
// selector for the paged navigation (it will be hidden)
navSelector : "div#pagination",
// selector for the NEXT link (to page 2)
nextSelector : "div#pagination a#nextPage",
// selector for all items you'll retrieve
itemSelector : ".entry",
// finished message
loading: {
finishedMsg: 'No more pages to load.'
}
},
// Trigger Masonry as a callback
function( newElements ) {
// hide new items while they are loading
var $newElems = $( newElements ).css({ opacity: 0 });
// ensure that images load before adding to masonry layout
$newElems.imagesLoaded(function(){
// show elems now they're ready
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
/**
* OPTIONAL!
* Load new pages by clicking a link
*/
// Pause Infinite Scroll
$(window).unbind('.infscr');
// Resume Infinite Scroll
$('.nav-previous a').click(function(){
$container.infinitescroll('retrieve');
return false;
});
}）（）;
html如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><html><head>
<title>{title}</title>
<meta name="description" content="{MetaDescription}" />
<link rel="shortcut icon" href="{Favicon}">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="alternate" type="application/rss+xml" title="RSS" href="{RSS}" />
<meta name="viewport" content="width=1220" />
<!-- DEFAULT VARIABLES -->
<meta name="color:Background" content="#FFFFFF" />
<meta name="color:Blog Title" content="#FFFFFF" />
<meta name="color:Text" content="#000000" />
<meta name="color:Link" content="#292929"/>
<meta name="color:Link Hover" content="#292929" />
<meta name="color:Header Text" content="#FFFFFF"/>
<meta name="color:Header Background" content="#292929" />
<meta name="image:Background" content="" />
<meta name="if:3 Columns" content="1"/>
<meta name="if:4 Columns" content="0"/>
<meta name="if:5 Columns" content="0"/>
<meta name="if:6 Columns" content="0"/>
<meta name="if:Link Dividers A" content="0"/>
<meta name="if:Link Dividers B" content="0"/>
<meta name="if:Link Dividers C" content="0"/>
<meta name="if:Rounded Photos" content="0"/>
<meta name="if:Compact Posts" content="0"/>
<meta name="if:Show Blog Title" content="1"/>
<meta name="if:Drop Down Ask Box" content="1"/>
<meta name="if:Header Transparent" content="0"/>
<meta name="if:Header Fixed" content="0"/>
<meta name="if:Blog Title A" content="0"/>
<meta name="if:Blog Title B" content="0"/>
<meta name="if:Blog Title C" content="1"/>
<meta name="text:Ask Title" content="Message" />
<meta name="text:Link One" content="" />
<meta name="text:Link One Title" content="" />
<meta name="text:Link Two" content="" />
<meta name="text:Link Two Title" content="" />
<meta name="text:Link Three" content="" />
<meta name="text:Link Three Title" content="" />
<meta name="text:Link Four" content="" />
<meta name="text:link Four Title" content="" />
<meta name="text:link Five" content="" />
<meta name="text:link Five Title" content="" />
<meta name="text:link Six" content="" />
<meta name="text:link Six Title" content="" />
<meta name="text:link Seven" content="" />
<meta name="text:link Seven Title" content="" />
<meta name="text:link Eight" content="" />
<meta name="text:link Eight Title" content="" />
<!--- STYLESHEETS & STATIC UPLOADS --->
<link href="http://static.tumblr.com/6jwx45k/VUxmq9xvq/animation.css" rel="stylesheet">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Lekton|Pacifico' rel='stylesheet' type='text/css'>
<!-- Bebas Font -->
<script type="text/javascript" src="http://static.tumblr.com/ts2nqrf/Msal8du92/cufon.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/ts2nqrf/mNQl8du9p/bebas.js"></script>
<script type="text/javascript"> Cufon.DOM.ready(function() { Cufon.replace('.tw_font_bebas', { fontFamily: 'bebas', hover:true }); $('.bebas').css('visibility','visible'); }); </script>
<script src="http://static.tumblr.com/6jwx45k/qnrmqhe43/ifie1.js"></script>
<script src="http://static.tumblr.com/6jwx45k/QcKmqhe47/ifie2.js"></script>