Не удается заставить Isotope JS работать со значениями высоты и ширины каждого изображения - PullRequest
Новая
       17

Не удается заставить Isotope JS работать со значениями высоты и ширины каждого изображения

0 голосов
/ 27 августа 2011

Я использую Isotope JS для сортировки и упорядочивания изображений, и он работает нормально, за исключением того, что при загрузке страницы скрипт не запускается, пока не загрузятся все изображения.На странице справки Isotope JS указывается, что предоставление значений high и width даст сценарию информацию, необходимую для упорядочивания элементов без загрузки изображений.Я сделал это, но скрипт все еще запускается только после загрузки всех изображений.Я новичок в кодировании JS, поэтому я пытался найти то, что я пропустил. 

<script src="js/jquery.isotope.min.js"></script> 


    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

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

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });

$ (окно) .load (function () {$ ('# container'). isotope ({itemSelector: '.item'});});var $ container = $ ('# container');$ ('. filters a'). click (function () {var selector = $ (this) .attr ('data-filter'); $ container.isotope ({filter: selector}); вернуть false;});$ ('# options'). find ('. option-set a'). click (function () {var $ this = $ (this); // не продолжить, если уже выбрано if (! $ this.hasClass)('selected')) {$ this.parents ('. option-set'). find ('. selected'). removeClass ('selected'); $ this.addClass ('selected');}});
<script> 


    $(window).load(function(){
        $('#container').isotope({
                itemSelector : '.item'
            });
        });

        var $container = $('#container');

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

        $('#options').find('.option-set a').click(function(){
        var $this = $(this);
            // don't proceed if already selected
            if ( !$this.hasClass('selected') ) {
                $this.parents('.option-set').find('.selected').removeClass('selected');
                $this.addClass('selected');
            }


        });

Ответы [ 2 ]

1 голос
/ 20 марта 2012

Требуется наличие встроенной высоты и ширины, но ваш код также запускается только после того, как плагин imagesLoaded запускает событие load ().

Вам нужно изменить код, который будет запускаться с помощью jQuery'sфункция ready () примерно так: 

$(document).ready(handler)

вместо 

$(window).load(handler)

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

0 голосов
/ 11 сентября 2011

Создатель плагина сам пишет: «Это потому, что Изотоп должен знать точную ширину предмета, прежде чем он раскладывает все предметы» здесь Нужна помощь для изменения функции;возврат анимированного расширения div Может быть, изображения, которые вы используете, слишком велики или слишком многочисленны, или и то, и другое?Возникла такая же проблема при ошибочной ссылке на папку с изображениями оригинального размера вместо их эквивалентов на веб-сайте.

...