好的，我正在为 tumblr 制作主题。我正在使用同位素作为布局选项。我想要的是有两种选择——一列有宽帖子（填满帖子所在的整个 div），另一种是砖石布局（我想我设置了）3 列。我还使用同位素制作过滤器，以便人们可以通过帖子类型缩小他们看到的范围。
*注意：这是一个非常基本的主题骨架副本，这样我就可以先弄清楚 javascript/jquery，而不会造成太多混乱。一旦我弄清楚这一点，我将添加其他 div 和部分，确保不理会它并解决所有问题。下面是迄今为止该页面的 html 副本。我一直在 Dreamweaver 中创建它，然后将其复制粘贴到 tumblr，其中 {tags} 被呈现为实际帖子。要按预期查看此页面，请访问http://drmstx-testing.tumblr.com，我那里只有 2 或 3 个帖子，但足以让您了解。
令我感到沮丧的是，单击网格或一列的链接可能会工作一次，然后什么也没有发生，或者唯一改变的是布局，而不是随着我改变而使帖子大小变大和变小的 css布局。另外，我希望它看起来很流畅，例如，有一次我让它有点小故障，所有的内容都会最小化到什么都没有，然后闪现/剪切到正确的布局。我希望人们看到帖子移动到它的位置并且只是缩小或增长一点，仅此而已。如果你能帮我解决这个问题，我知道这可能会让人感到困惑，尤其是其中的 tumblr 代码标签。我把它们拿出来，但我认为 tumblr 呈现它的方式实际上正在改变它的行为方式，所以我有点需要它……如果你需要澄清，请告诉我。
为了使这更容易一点，请查找这些类和部分代码—— .box .grid .onecolumn || css 的结尾、javascript 部分和正文的开头
<style type="text/css">
/**** Isotope filtering ****/
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
/*==============================*/
.post {
transition: all 1st ease-in-out;
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.post img {width: 100%;}
.grid {
width: 33%;
min-width: 350px;
max-width: 475px;
}
.onecolumn {
width: 100%;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script>
$(document).ready(function(){
var $container = $('#content');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
$('#nav #sort a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
$('#nav #layout a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
layoutMode: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false,
}
});
return false;
});
});
function grid(){
$(".post").switchClass( "onecolumn", "grid", 400, "easeInOut" );
};
function onecol(){
$(".post").switchClass( "grid", "onecolumn", 400, "easeInOut" );
};
</script>
</head>
<body>
<div id="header"></div>
<div id="nav">
<div id="sort">
<h3>Filter</h3>
<ul>
<li><a href="" data-filter="*">all</a></li>
<li><a href="" data-filter=".text">text</a></li>
<li><a href="" data-filter=".photopost">photo</a></li>
<li><a href="" data-filter=".quote">quote</a></li>
<li><a href="" data-filter=".link">link</a></li>
<li><a href="" data-filter=".chat">chat</a></li>
<li><a href="" data-filter=".video">video</a></li>
<li><a href="" data-filter=".audio">audio</a></li>
</ul>
</div>
<div id="layout">
<ul>
<li><a href="" onclick="onecol()" data-filter="straightDown">Single Column</a></li>
<li><a href="" onclick="grid()" data-filter="masonry">Grid</a></li>
</ul>
</div>
</div>
<div id="content" class="isotope">
{block:Posts}
<article>
<!--Unique code for each post type-->
{block:Text}
<div class="post text grid">
{block:Title}
<h1 class="title"><a href="{Permalink}">{Title}</a></h1>
{/block:Title}
{Body}
</div>
{/block:Text}
{block:Photo}
<div class="post photo grid">
{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Photo}
{block:Photoset}
<div class="post photoset grid">
{Photoset-500}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Photoset}
{block:Panorama}
<div class="post panorama grid">
{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}" />{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Panorama}
{block:Quote}
<div class="post quote grid">
<blockquote>{Quote}</blockquote>
{block:Source}<cite> {Source} </cite>{/block:Source}
</div>
{/block:Quote}
{block:Link}
<div class="post link grid" data-category="link">
<h1 class="title"><a href="{URL}">{Name}</a></h1>
{block:Description}{Description}{/block:Description}
</div>
{/block:Link}
{block:Chat}
<div class="post chat grid" data-category="chat">
<ul>
{block:Lines}<li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label}<p> {Line} </p></li>{/block:Lines}
</ul>
</div>
{/block:Chat}
{block:Audio}
<div class="post audio grid" data-category="audio">
{block:TrackName}<h1 class="title"><a href="{Permalink}">{TrackName}</a></h1>{/block:TrackName}
{block:AlbumArt}<img src="{AlbumArtURL}" width="500" height="500"/>{/block:AlbumArt}
<div class="player post">{AudioPlayerBlack}</div>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Audio}
{block:Video}
<div class="post video grid" data-category="video">
<div class="video-player">{Video-500}</div>
{block:Caption}{Caption}{/block:Caption}
</div>
{/block:Video}
{block:Answer}
<div class="post answer grid" data-category="answer">
<h1 class="title">{Question}</h1>
<div class="user">
<img src="{AskerPortraitURL-96}"/>
<p>{Asker}</p>
</div>
{Answer}
</div>
{/block:Answer}
</article>
{/block:Posts}
</div>
</body>