如何制作不同屏幕尺寸的响应式同位素图库插件？

Question

我想让以下同位素图库响应所有不同的屏幕尺寸。每当我想以较小的尺寸 window（320px、576px、768px）查看它时，总会有差距。我该如何解决？

我的网站link:Website

谢谢。

$('.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>

我附上了同位素图库的外部Js文件和HTML文件。

Answer 1

同位素图库似乎一直占据94%。您可以尝试给父容器 3% 的保证金。所以画廊

i_gallery {
  width: 100%;
  /* margin: 0 auto; */
  margin: 3%;
}

将居中。

如何制作不同屏幕尺寸的响应式同位素图库插件？

How to make a responsive isotope gallery plugin in different screen size?

html

javascript

css

jquery-isotope