Изотопное перекрытие изображений?

Question

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

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

Редактировать: Вот скрипка http://jsfiddle.net/TLjay/

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

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

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

<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>

Answer 1

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

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

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

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

---

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

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

Демо на http://jsfiddle.net/TLjay/1/

Answer 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');
      });
    }
});

Answer 3

Если у вас есть размеры доступных изображений, вы можете сделать обходной путь с заполнителями SVG.

Например: используйте элемент figure и поместите img с «position: absolute» поверх svg.

Таким образом, изотоп отображает элемент с SVG, который занимает пространство и помещает изображение поверх него.

<figure>
<svg xmlns="http://www.w3.org/2000/svg"
  width="[inputKnownImageWidth]"
  height="[inputKnownImageHeight]"
></svg>
<img src="" alt="">
</figure>

Answer 4

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