Задать вопрос
@johnylikejuice
Front end developer
html

Как сверстать не адаптивную сетку из картинок такого типа?

Доброго времени суток. Есть макет, условие - страница должна быть не адаптивной, и при прокрутке вниз будут добавляться фотки через плагин. С прокруткой вопрос решен, остался нюанс как построить такую сетку. Слыхал что есть плагины типа Masonry, но они перестраивают расположение блоков при ресайзе, мне же нужно что бы они оставались на месте. Подскажите, в таких плагинах как то отключается перестройка при уменьшении экрана? Или же есть какие то другие варианты для построения такой сетки? Буду благодарен

7fc3fb97c47f40afa2bf294d2b6b75c5.pngлюбому совету.
  • Вопрос задан
  • 478 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 5
kosolapus
@kosolapus
Если помогло - отмечайте решением
отключить масштабирование экрана на устройствах
<meta name="viewport" content="width=ТУТ ШИРИНА МАКЕТА">

Вполне рабочий вариант. Правда, так будет меняться размер всего макета, т.е. весь сайт будет неадаптивным.
Событие в js, отвечающее за изменение размера окна
window.onresize
Если не жалко, можно выдрать из исходников Masonry все упоминания и наслаждаться.
$('.grid').masonry({
  resize: false
});

Наиболее адекватный вариант без варварства)
Ответ написан
7 комментариев
7 комментариев
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Если нужна НЕ адаптивная сетка, задайте блоки ручками через CSS, а картинки повесьте на фон тега А.
У вас всего 4 типа блоков. Вот и сделайте общий класс и вспомогательный.
Ответ написан
1 комментарий
1 комментарий
@hscode
Обычно все эти перестановки делаются в css. Поищите там media queries и попробуйте их очистить.
Ответ написан
1 комментарий
1 комментарий
@soledar10
html css3 js jquery
https://jsfiddle.net/soledar10/575uwrqv/
Ответ написан
1 комментарий
1 комментарий
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Masonry свойства
isResizeBound(логический)
Связывает расположение блоков с изменениями размеров окна.
По умолчанию: true

По поводу ссылки в ссылке.
Вполне может быть одна ссылка, а кнопка с помощью span. Плюс: нажиматься будет вся область картинки, а не только кнопка.

Еще хочу напомнить про прекрасные теги figureи figcaption.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработка VST-плагина
19 апр. 2024, в 20:43
20000 руб./за проект
Нарисовать баннер для интернет-магазина
19 апр. 2024, в 20:35
500 руб./в час
Разработать несистемный алерт
19 апр. 2024, в 20:11
500 руб./за проект
Ещё заказы