当我点击filter时,li得到一个左重叠的位置,然后才能过渡到filter。我测试了前面的问题和答案,但没有解决问题。ul不使用绝对位置,li类已离开浮点.
下面是html
<div class="filters">
<ul id="filters" class="clearfix">
<li><a title="all" href="#" class="active"> all </a></li>
<li><a title="web" href="#"> web </a></li>
<li><a title="app" href="#"> app </a></li>
<li><a title="logo" href="#"> logo </a></li>
<li><a title="card" href="#"> card </a></li>
<li><a title="icon" href="#"> icon </a></li>
</ul>
</div>
<div id="portfolio">
<ul id="portfolio_list">
<li class="portfolio" data-id="id-1" data-type="logo">
<div class="portfolio-wrapper">
<img src="images/portfolios/logo/5.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Bird Document</a>
<span class="text-category">Logo</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
<li class="portfolio" data-id="id-2" data-type="app">
<div class="portfolio-wrapper">
<img src="images/portfolios/app/1.jpg" alt="" />
<div class="label">
<div class="label-text">
<a class="text-title">Visual Infography</a>
<span class="text-category">APP</span>
</div>
<div class="label-bg"></div>
</div>
</div>
</li>
</ul></div>
这是jQuery调用
$(document).ready(function () {
var $filter = $('#filters a');
var $portfolio = $('#portfolio_list');
var $data = $portfolio.clone();
$filter.click(function(e) {
if ($($(this)).attr("title") == 'all') {
var $filteredData = $data.find('li');
} else {
var $filteredData = $data.find('li[data-type=' + $($(this)).attr("title") + ']');
}
$portfolio.quicksand($filteredData, {
adjustHeight: 'dynamic',
duration: 800,
easing: 'easeInOutQuad'
});
$('#filters a').removeClass('active');
$(this).addClass('active');
});
});
忘记发布css
#portfolio_list li { overflow:hidden; float: left; } #portfolio_list .portfolio { width:19%; margin:2% 1% 0% 1%; border: 1px solid #c8c8a9; background: #fff; padding: 20px; } #portfolio_list .portfolio-wrapper { overflow:hidden; position: relative !important; cursor:pointer; } #portfolio_list .portfolio img { max-width:100%; position: relative; } #portfolio_list .portfolio .label { position: absolute; width: 100%; height:50px; bottom:-50px; } #portfolio_list .portfolio .label-bg { background: #fff; width: 100%; height:100%; position: absolute; top:0; left:0; } #portfolio_list .portfolio .label-text { color:#000; position: relative; z-index:500; padding:12px 8px 0; } #portfolio_list .portfolio .text-category { display:block; }
感谢任何帮助。多谢了。
这个问题是由于使用相同的ID对ul和li进行样式化,同时使用jQuery调用它造成的。需要使用一个没有css样式的ID来避免在流沙中产生故障。