Question

在页面加载时，同位素在我的同位素项目之间添加了一个排水沟。当我调整窗口大小时，即使是1px，也会修复布局。

为了同位素在我的图像之间增加额外的间距，我一直在绞尽脑汁。它仅在1页上执行此操作，并且代码与其他页面相同，唯一的例外是我在此页面中加载稍大的jpg图像。

我已经使用我的代码/依赖项创建了codepen，因此您可以看到它在那里工作。如果您有关于改进我的代码的提示，请告诉我。

这是我的同位素功能：

{{1}}

这是我遇到的问题的图片：

Answer 1

嗯..我的解决方案充其量是肮脏的：

itemFilter: function(isoContainer, $isoSelector) {
    var $win = $(window);
    $win.load(function() {
        var itemGroup;
        var viewBySelect;
        var nameFilter;
        var buttonFilter;
        var usedNames = {};

        var $isoContainer = $(isoContainer);


        // Lazy load w/ sorting/filtering enabled
        var $imgs = $('.lazy');

        // init Isotope
        var $container = $isoContainer.isotope({
            itemSelector: $isoSelector,
            layoutMode: 'fitRows',
            animationEngine: 'best-available',
            getSortData: {
                name: '.name'
            },
            filter: function() {
                var $this = $(this);

                var itemGroupResult = itemGroup ? $this.is(itemGroup) : true;
                var viewBySelectResult = viewBySelect ? $this.is(viewBySelect) : true;
                var nameFilterResult = nameFilter ? $this.is(nameFilter) : true;
                var buttonResult = buttonFilter ? $this.is(buttonFilter) : true;

                return itemGroupResult && viewBySelectResult && nameFilterResult && buttonResult;
            }
        });
        $container.isotope('layout');

        // Fixes layout issues when images are still loading.
        $container.imagesLoaded().progress(function() {
            $container.isotope('layoutItems');
        });

        // Load images when filtering is initiated and 
        // we have a new HTML layout to lazyload on.
        $container.isotope('on', 'layoutComplete', function () {
            FEATURES.loadVisible($imgs, 'lazylazy');
        });

        // Load images on scroll with event lazylazy.
        $win.on('scroll', function () {
            FEATURES.loadVisible($imgs, 'lazylazy');
        });

        // Initialize lazyload with fadeIn effect and failure_limit.
        // Listening on event 'lazylazy'
        $imgs.lazyload({
            effect: "fadeIn",
            failure_limit: Math.max($imgs.length - 1, 0),
            event: 'lazylazy'
        });

        // select filtering - by Role
        $('.view-by-select').on('change', function() {
            viewBySelect = $('option:selected', this).data('filter');
            $container.isotope();
        });

        // filtering - by Profile Name
        $('.filter-title').on('click', 'span', function() {
            nameFilter = $(this).hasClass('name');
            $container.isotope({ sortBy: nameFilter });
        });

        // reset filtering
        $('.filter-reset').on('click', function() {
            $('.view-by-select').val('default').trigger('change');
            buttonFilter = $(this).data('filter');
            $container.isotope();
        });

        // Remove duplicate roles from select list
        var $selectList = $('select.view-by-select > option');
        $selectList.each(function () {
            if(usedNames[this.text]) {
                $(this).remove();
            } else {
                usedNames[this.text] = this.value;
            }
        });

    });
}

我将整个同位素脚本包裹在$(window).load()函数中。这解决了页面加载时的布局问题。任何人都有更好的解决方案吗？

页面加载时同位素排水沟/间距，窗口上没有排水沟/间距调整大小

1 个答案: