好的，我正在为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>