Javascript 同位素-数字图像和高度
我的代码有问题,我在一个新的网站上写了一个字,我想让这个东西更吸引人。我的代码是:Javascript 同位素-数字图像和高度,javascript,css,jquery-isotope,Javascript,Css,Jquery Isotope,我的代码有问题,我在一个新的网站上写了一个字,我想让这个东西更吸引人。我的代码是: <div class="portfolioFilter"> <ul class="portfolio-isotope-filter clearfix"> <li class="selected"><a href="#" data-filter="*"><span>All</span></a>
<div class="portfolioFilter">
<ul class="portfolio-isotope-filter clearfix">
<li class="selected"><a href="#" data-filter="*"><span>All</span></a></li>
<li><a href="#" data-filter=".people"><span>Concerte</span></a></li>
<li><a href="#" data-filter=".places"><span>Spectacole</span></a></li>
<li><a href="#" data-filter=".food"><span>Prezentari</span></a></li>
</ul>
</div>
<div id="imagini-artists">
<div class="portfolioContainer cf">
<div class="objects">
<img src="img/artists/1.png" alt="image">
</div>
<div class="people places">
<img src="img/artists/2.png" alt="image">
</div>
<div class="food">
<img src="img/artists/3.png" alt="image">
</div>
<div class="people places">
<img src="img/artists/4.png" alt="image">
</div>
<div class="places objects">
<img src="img/artists/5.png" alt="image">
</div>
<div class="people food objects">
<img src="img/artists/6.png" alt="image">
</div>
<div class="clear"></div>
</div>
$(窗口)。加载(函数(){
变量$container=$('.portfolioContainer');
$container.com({
筛选器:'*',
动画选项:{
持续时间:750,
“线性”,
队列:false
}
});
$('.portfolioFilter a')。单击(函数(){
$('.portfolioFilter.current').removeClass('current');
$(this.addClass('current');
变量选择器=$(this.attr('data-filter');
$container.com({
过滤器:选择器,
动画选项:{
持续时间:750,
“线性”,
队列:false
}
});
返回false;
});
});
问题是:我找不到可以在chrome show me a值中设置“portfolioContainer”高度的位置,但它来自html标记样式=“…”。第二个问题是图像的数量,我想放3个图像,所以可能需要改变宽度
我需要一些帮助,
提前感谢portfolioContainer的高度将由同位素动态设置,取决于其中元素的数量和位置。这就是为什么在chromedev工具中检查时会看到内联高度值。如果确实希望覆盖此高度,请使用
。portfolioContainer{height:1000px!important;}
其中1000px
是您要添加的高度,但是,当“All”-“*”处于活动状态时,行中的图像数是2,我想要3。。如果我改为其他类别,则为3。
<script type="text/javascript">
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
</script>