如何解决如何制作不同屏幕尺寸的响应式同位素图库插件?
我想使以下同位素库对所有不同的屏幕尺寸都具有响应性。每当我想在较小尺寸的窗口(320px,576px,768px)中看到它时,总会有间隙。我该怎么解决?
谢谢。
$('.i_gallery').isotope({
itemSelector: '.g_item',percentPosition: true,masonry: {
columnWidth: '.g_item'
}
});
//filtering Click function
$('.portfolio-menu ul li').click(function() {
$('.portfolio-menu ul li').removeClass('active');
$(this).addClass('active');
let filterItems = $(this).attr('data-filter');
$('.i_gallery').isotope({
filter: filterItems
})
return false;
});
<div class="wrapper">
<div class="portfolio-menu">
<ul>
<li class="active">All</li>
<li data-filter=".web">Web Design</li>
<li data-filter=".logo">logo Design</li>
<li data-filter=".wordpress">wordpress</li>
<li data-filter=".ecommerce">E-Commerce</li>
</ul>
</div>
<div class="i_gallery">
<div class="g_item web">
<img src="image/10.png" alt="" class="img-fluid">
</div>
<div class="g_item web">
<img src="image/11.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/12.png" alt="">
</div>
<div class="g_item wordpress">
<img src="image/13.png" alt="">
</div>
<div class="g_item logo">
<img src="image/14.png" alt="">
</div>
<div class="g_item logo">
<img src="image/15.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/16.png" alt="">
</div>
<div class="g_item ecommerce">
<img src="image/17.png" alt="">
</div>
</div>
</div>
解决方法
同位素画廊似乎一直都在占据94%的位置。您可以尝试给父容器3%的保证金。所以画廊
i_gallery {
width: 100%;
/* margin: 0 auto; */
margin: 3%;
}
将排在中心。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。