Проблемы с перекрывающимися изображениями изотопов - результат использования JS для установки размера? Или я использую imagesLoaded неправильно? - PullRequest
Новая
       27

Проблемы с перекрывающимися изображениями изотопов - результат использования JS для установки размера? Или я использую imagesLoaded неправильно?

0 голосов
/ 07 апреля 2020

У меня есть некоторые проблемы с плагином Jquery Isotope. В некоторых случаях я получал перекрывающиеся div, и я не уверен, что это вызвало. Если бы мне пришлось угадывать, это, вероятно, либо:

  1. Я не использую загруженные изображения правильно

  2. Я использую JS для размера div и, может быть, это вызывает проблемы? Я знаю, что в большинстве демоверсий Isotope размеры обрабатываются с помощью CSS…

В настоящее время я изучаю JavaScript, поэтому весьма вероятно, что я допустил несколько глупых ошибок. Конструктивная критика, безусловно, приветствуется!

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

О, и одно предостережение: пока я заметил эту проблему только в Chrome. Я не видел такой же проблемы в Safari.

Вот пример перекрытия:

enter image description here

Вот мой изотопный код (включая imagesLoaded): 

var $grid = $('.grid').imagesLoaded( function() {
  // init Isotope after all images have loaded
  $grid.isotope({
    // options...
      itemSelector: '.grid-item',
      percentPosition: true,
      layoutMode: 'masonry',
      masonry: {
        columnWidth: '.grid-sizer'
      },
      stagger: 30,
  });
});

Вот код JS, который я использую для определения размера изображений: 

gridItems.forEach(div => {
    var imgOrientation = div.getAttribute("data-orientation")
    var thumbnailScale = div.getAttribute("data-thumbnail_scale")
    console.log(imgOrientation)
    console.log(thumbnailScale)

    if (imgOrientation === "portrait") {
        div.style.height = (((window.innerWidth * .25) * thumbnailScale) / 100) + "px"
    } else {
        div.style.width = (((window.innerWidth * .25) * thumbnailScale) / 100) + "px"
    }
})

Как всегда, большое спасибо за любую помощь, которую вы можете предложить!

...