Masonry - отображение в браузере

@Jule4ka84 · Регистрация: 04.01.2022

Студворк — интернет-сервис помощи студентам

Здравствуйте,

прошу помощи.

Сделала сайт с галереями Masonry.

Появляется глюк:

при отображении в браузере все работает отлично, но если уменьшить окно браузера и нажать "обновить страницу", то ИНОГДА у картинок сверху появляются отступы. Причем этого нет на моб.устройствах, и также нет если запустить эмуляцию большого устройства в панели разработчика.
при этом отступы пропадут, если изменить размер окна. но видимо запоминаются, потому что если перейти по другой ссылке после такого обновления, другая галерея тоже отобразится сразу с отступами. При очистке кэша все пропадает. Самое интересное, что если нажать F12, то эти отступы сразу пропадают, и все отображается как нужно.

в коде использую:

HTML5
1
<script src="js/imagesloaded.pkgd.min.js"></script>

- подключаю на страницу с галереей

JavaScript
1
2
3
4
5
6
7
8
imagesLoaded(grid, function() {
  msnry = new Masonry(grid, {
    itemSelector: '.grid-item',
    gutter: 10,                  
    columnWidth: '.grid-sizer',
    percentPosition: true,
  })
})

Помогите, пожалуйста. Код большой, если проблема не очевидна, выложу.
Заранее большое спасибо!

Добавлено через 6 минут
причем происходит какой-то момент, непонятно с чем связанный, что я не всегда могу поймать этот глюк - он не происходит
при каких-то условиях, сколько ни жми

Добавлено через 2 часа 2 минуты
получается , что картинка внутри своего grid-item, а отступ - над ним. в панели разработчика его даже нельзя измерить.

Добавлено через 58 минут
еще ошибка не возникает в Mozilla

@Jule4ka84 · 10.09.2022, 23:23 **[ТС]**

нашла ответ с JQuery, которого не знаю

и получается по аналогии с ним у меня
а надо JS ,чтобы не подключать его ради этого куска ко всем страницам.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
var $grid = $('.grid')
$grid.masonry({
    itemSelector: '.grid-item',
    gutter: 10,                   //(css: --gallery-grid-gap)
    columnWidth: '.grid-sizer',
    percentPosition: true,
});
 
$grid.imagesLoaded(function(){
  $grid.masonry('layout');
})

на JS переписала свое по аналогии:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
imagesLoaded(grid, function() {
    msnry = new Masonry(grid, {
    itemSelector: '.grid-item',
    gutter: 10,         
    columnWidth: '.grid-sizer',
    percentPosition: true,
  })
}) 
 
imagesLoaded(grid).on('progress', function() {
  // layout Masonry after each image loads
  msnry.layout();
});

в консоли естественно ошибка: Uncaught TypeError: Cannot read properties of undefined (reading 'layout')
помогите пожалуйста, тут явно по аналогии нужно добавить буквально одну строчку кода.

@Ovederax · 11.09.2022, 07:44

Сообщение от Jule4ka84

на JS переписала свое по аналогии:

в документации есть ссылки на примеры кода на vanila js
https://masonry.desandro.com/layout.html
https://codepen.io/desandro/pen/MwJoZQ

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// external js: masonry.pkgd.js, imagesloaded.pkgd.js
 
// init Masonry
var grid = document.querySelector('.grid');
 
var msnry = new Masonry( grid, {
  itemSelector: '.grid-item',
  columnWidth: '.grid-sizer',
  percentPosition: true
});
 
imagesLoaded( grid ).on( 'progress', function() {
  // layout Masonry after each image loads
  msnry.layout();
});

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<h1>Masonry - imagesLoaded progress, vanilla JS</h1>
 
<div class="grid">
  <div class="grid-sizer"></div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/orange-tree.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/submerged.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/look-out.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/one-world-trade.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/drizzle.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/cat-nose.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/contrail.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/golden-hour.jpg" />
  </div>
  <div class="grid-item">
    <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/82/flight-formation.jpg" />
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
* { box-sizing: border-box; }
 
/* force scrollbar */
html { overflow-y: scroll; }
 
body { font-family: sans-serif; }
 
/* ---- grid ---- */
 
.grid {
  background: #DDD;
}
 
/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}
 
/* ---- .grid-item ---- */
 
.grid-sizer,
.grid-item {
  width: 33.333%;
}
 
.grid-item {
  float: left;
}
 
.grid-item img {
  display: block;
  max-width: 100%;
}

@Jule4ka84 · 11.09.2022, 09:05 **[ТС]**

Именно так, слово-в-слово, как там, у меня написано.

Ругается на Layout.

Попробую только еще взять файл не min.js, а расширенный

Хотя для jquery при таком де раскладе ошибки нет

@Ovederax · 11.09.2022, 10:37

Сообщение от Jule4ka84

Именно так, слово-в-слово, как там, у меня написано.

на codepen код работает,
хотя и иногда не грузятся фото из-за того что оно где-то на зарубежном сервере

Сообщение от Jule4ka84

Попробую только еще взять файл не min.js, а расширенный

зависимости если что там такие стоят
можно вручную загрузить файлы скриптов, мб есть различия с теми что у вас
https://unpkg.com/masonry-layo... ry.pkgd.js
https://unpkg.com/imagesloaded... ed.pkgd.js

@Jule4ka84 · 11.09.2022, 14:49 **[ТС]**

Он получается не понимает метод layout. Хотя в скрипте есть

@Jule4ka84 · 12.09.2022, 09:55 **[ТС]**

заработало. спасибо

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

@Jule4ka84 0 / 1 / 0 Регистрация: 04.01.2022 Сообщений: 79
	11.09.2022, 09:05 [ТС]
	Именно так, слово-в-слово, как там, у меня написано. Ругается на Layout. Попробую только еще взять файл не min.js, а расширенный Хотя для jquery при таком де раскладе ошибки нет 0

@Jule4ka84 0 / 1 / 0 Регистрация: 04.01.2022 Сообщений: 79
	11.09.2022, 14:49 [ТС]
	Он получается не понимает метод layout. Хотя в скрипте есть 0

@Jule4ka84 0 / 1 / 0 Регистрация: 04.01.2022 Сообщений: 79
	12.09.2022, 09:55 [ТС]
	заработало. спасибо 0