【问题标题】:Chrome & Firefox: pictures stick togetherChrome 和 Firefox:图片粘在一起
【发布时间】:2015-08-27 06:44:36
【问题描述】:

我的新website 遇到了问题。 网格的一些图片是粘在一起的,但仅在 Firefox 和 Chrome 中。 如果我放大到 110% 并缩小到 100%,问题就不会出现。 另外,如果我清除缓存并重新加载问题不存在。

你们中有人有解决问题的想法吗?

还有一张问题的图片:

我相信masonry.js 有问题。但我不知道如何解决这个问题。

(function ($) {
    var $container = $('.masonry_wrapper'),
        colWidth = function () {
            var w = $container.width(), 
                columnNum = 1,
                columnWidth = 0;
            if (w > 1200) {
                columnNum  = 5;
            } else if (w > 900) {
                columnNum  = 4;
            } else if (w > 600) {
                columnNum  = 3;
            } else if (w > 300) {
                columnNum  = 2;
            }
            columnWidth = Math.floor(w/columnNum);
            $container.find('.item').each(function() {
                var $item = $(this),
                    multiplier_w = $item.attr('class').match(/item-w(\d)/),
                    multiplier_h = $item.attr('class').match(/item-h(\d)/),
                    width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
                    height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
                $item.css({
                    width: width,
                    height: height
                });
            });
            return columnWidth;
        }

        function refreshWaypoints() {
            setTimeout(function() {
            }, 1000);   
        }

        $('nav.portfolio-filter ul a').on('click', function() {
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector }, refreshWaypoints());
            $('nav.portfolio-filter ul a').removeClass('active');
            $(this).addClass('active');
            return false;
        });

        function setPortfolio() { 
            setColumns();
            $container.isotope('reLayout');
        }

        isotope = function () {
            $container.isotope({
                resizable: true,
                itemSelector: '.item',
                masonry: {
                    columnWidth: colWidth(),
                    gutterWidth: 0
                }
            });
        };
    isotope();
    $(window).smartresize(isotope);

}(jQuery));

对不起我的英语。

非常感谢您。

【问题讨论】:

    标签: javascript css wordpress google-chrome firefox


    【解决方案1】:

    可能是因为你连接的是砌体而不是同位素

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-04-13
      • 2011-02-16
      • 2015-08-30
      • 1970-01-01
      • 1970-01-01
      • 2018-09-22
      • 2016-11-08
      • 2020-11-14
      相关资源
      最近更新 更多