jquery - 需要帮助将我的同位素容器居中

Question

我有一组缩略图，我想在列消失时居中，有没有一种简单的方法可以做到这一点。

这是例子 http://turnpost.turnpostinteractive.com/all-work/

这是jquery

function initIsotope() {
    // Init Portfolio masonry
    var $container = $('.portfolio-container');
    $container.isotope({
        resizable: false,
        masonry: {
            columnWidth: 291,
            gutterWidth: 10
        }
    });

    $(".filter-portfolio li a").click(function(e){
        e.preventDefault();
        $(this).closest('.filters').find('a').removeClass('selected');
        $(this).toggleClass('selected');


        var selector = $(this).attr('data-filter');
        $('.portfolio-container').isotope({
            filter: selector,
            masonry: {
                columnWidth: 291,
                gutterWidth: 10
            }
        }, function() {
            // Refresh waypoints
            $.waypoints('refresh');
        });

        return false;
    });

  $('.noclick').off('click');

    // Init Portfolio masonry
    $('.entries-container').isotope({
        itemSelector : '.blog-entry'
    });
}

function reLayoutIsotope() {
    $('.isotope').isotope( 'reLayout' );
}

Answer 1

您可以访问 css 吗？它们有确切的宽度或百分比吗？如果你在他们周围有一个conatiner，你可以绝对定位。然后，给容器一个宽度(任何宽度都可以)。将容器放置在宽度的负一半处。然后给它 margin-left 50%；示例如下。

HTML

<div class="container">
    ...stuff
</div>

CSS

.container {position:absolute; left:-300px; width:600px; margin-left:50%;}

这会将容器从页面左侧移动 50%。然后它会将其向左移回容器宽度的一半。将元素的中间定位在页面的中间。

希望对您有所帮助。