Изотопы перекрывают изображения?

Похоже, это происходит только в Chrome и Safari, а не в Firefox. Я использую его с основой для создания основы, поэтому я не уверен, что делать с настройкой высоты. Также кажется, что нет достаточного расстояния между изображениями в Chrome/Safari.

Как это исправить?

Изменить: вот скрипка http://jsfiddle.net/TLjay/

Проблема с этим в том, что он, похоже, не отображает проблему, с которой я сталкиваюсь. Поэтому я не уверен, что с этим делать. Я пробовал отключить все, кроме изотопа.. все jquery/css, и он по-прежнему сжимает изображения в Chrome/Safari, но отлично работает в firefox.

Кроме того, если я попал в фильтр "Все", он растягивает страницу так, как ее должно выглядеть так, что может быть полезно при вычислении этого

Я получил его для работы с imagesLoaded, поэтому его предоставление достаточно места, но пространство слева и справа от изображений все еще не там, где оно должно быть.. my script находится ниже

<script type="text/javascript">
    var $container = $('.isosort')
    // initialize Isotope
        $container.isotope({
            // options...
            resizable: false, // disable normal resizing
            layoutMode : 'fitRows',
            animationEngine : 'best-available',

            // set columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 5 }
        });

        // update columnWidth on window resize
        $(window).smartresize(function(){
            $container.isotope({
            // update columnWidth to a percentage of container width
            masonry: { columnWidth: $container.width() / 5 }
            });
        });
        $container.imagesLoaded( function(){

                $container.isotope({
            // options...
                });
        });

        $('#filters a').click(function(){
            var selector = $(this).attr('data-filter');
            $container.isotope({ filter: selector });
            return false;
        });
    </script>

Ответ 1

Обновить (исходный ответ был неправильным, потому что браузер использовал кешированные изображения..)

Проблема заключается в том, что изображения не загружаются и вычисления терпят неудачу.

Если вы завершите изотопный код в $(window).load(function(){ ..... });, он работает как ожидалось.

См. http://jsfiddle.net/TLjay/2/

Не уверен, почему это происходит, но простое обходное решение (поскольку оно фиксируется после изменения размера окна), чтобы вручную вызвать resize.

поэтому просто добавление $(window).resize(); в конце вашего кода исправляет его.

Демо на http://jsfiddle.net/TLjay/1/ Забастовкa >

Ответ 2

imagesLoaded работает, проверяя изображения, находящиеся в текущем элементе. Таким образом, в вашем случае это фактически ничего не делает в $(window).load(), поскольку в этом элементе нет элементов. Вместо этого я бы рекомендовал запускать imagesLoaded снова, после того, как элементы были вставлены с $.ajax.success

success: function(data){
    // Update isotope container with new data. 
    $container.isotope('remove', $container.data('isotope').$allAtoms )
    $container.isotope('insert', $(data) )
      // trigger isotope again after images have been loaded
      .imagesLoaded( function() {
        $container.isotope('reLayout');
      });
    }
});

Ответ 3

Вы должны убедиться, что вы предварительно загрузите все изображения до того, как вы назовете метод изотопа, вот демоверсия реального мира для этого: http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html.htm, вы предварительно загрузите изображения с плагином jquery.imagesloaded.min.js, затем вызов изотопа, содержимое не будет перекрываться.