Воссоздание макета поиска картинок Google с помощью CSS

• Курсор изменится на указатель при наведении .image--basic на .image--basic когда он находится только в .image--basic состоянии. Это дает пользователю визуальный индикатор того, что нажатие на изображение что-то сделает.
• max-height элемента .image-expand установлена ​​в 0 в его начальном состоянии. max-height получает значение 500px, если элемент .image-cell имеет класс .image-cell . Обратите внимание, что если бы увеличивалась площадь расширения, необходимо было бы также увеличить максимальное значение высоты, чтобы отображалась вся область.
• Переходы, примененные к max-height и margin-bottom позволяют эффект скольжения при переключении расширенной области.

• Визуально мы хотим, чтобы расширяющаяся область .image-grid с .image-grid . Для этого нам нужно .image-grid набор горизонтальных .image-grid в .image-grid .

  1. Во-первых, .image--expand задается .image--expand box-sizing: content-box; чтобы исключить значение отступа из его ширины.
  2. Элемент .image--expand имеет ширину, в 5 раз превышающую его родительский элемент, на 500% . Это позволяет расширенной области занимать всю ширину .image-grid , минус отступ.
  3. Чтобы занять оставшееся пространство, .image--expand задается .image--expand влево и вправо.
  4. position: relative; и left: -5px объявления left: -5px смещают расширенную область влево, чтобы свести на нет значение .image-grid padding-left.

Умный Бит

Мы хотим сместить все .image--expand элементы в .image--expand левое положение в соответствии с левой стороной .image-grid . Для этого мы устанавливаем отрицательную маржу в зависимости от ее позиции в ряду.

Вот где приходит nth-of-type :

 .image__cell:nth-of-type(5n+2) .image--expand { margin-left: -100%; } .image__cell:nth-of-type(5n+3) .image--expand { margin-left: -200%; } .image__cell:nth-of-type(5n+4) .image--expand { margin-left: -300%; } .image__cell:nth-of-type(5n+5) .image--expand { margin-left: -400%; } 

Первоначально я использовал nth-child для достижения того же эффекта, но в других проектах я обнаружил, что iOS8 Safari довольно глючит, поэтому я стараюсь избегать его использования. Вместо этого я использую nth-of-type поскольку он в основном служит той же цели. Если вам интересно, вы можете найти краткое объяснение nth-of-type здесь .

В приведенном выше CSS мы нацеливаемся на вторую, третью и четвертую расширяемые области .image__cell в каждой строке. Значение margin-left зависит также от положения элемента в строке. Обратите внимание, что первый элемент в каждой строке не нуждается в заданном значении margin-left поскольку он уже находится в нужной позиции. Чем дальше элемент находится слева, тем больше нам нужно отодвинуть расширяемую область обратно в левую сторону (с шагом -100%). Без этого расширяемая область будет выровнена с ее родителем, как показано ниже:

Нам также нужно вставить CSS, показанный ниже, чтобы гарантировать, что первый .image__cell в каждой строке, кроме первой строки, .image__cell на своей позиции, когда более .image__cell элементы .image__cell развернуты.

 .image__cell:nth-of-type(5n+6) { clear: left; } 

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

Во-первых, стрелка вверх, указывающая, к какому изображению относится расширенный блок:

 .image__cell.is-expanded .arrow--up { display: block; border-bottom: 8px solid #222; border-left: 8px solid transparent; border-right: 8px solid transparent; height: 0; width: 0; margin: 2px auto 0; } 

Обратите внимание, что стиль стрелки достигается путем создания треугольника CSS , что позволяет сохранить HTTP-запрос. Этот эффект легко достигается благодаря умному использованию границ и установке высоты и ширины на 0.

Мы также хотим, чтобы стрелка появлялась только при .image__cell элемента .image__cell . Это делается путем добавления класса .is-expanded . Наконец, мы хотим, чтобы стрелка оставалась в горизонтальном центре элемента .image__cell поэтому margin: 0 auto; применены.

Теперь мы готовы стилизовать кнопку «Закрыть», которая позволит пользователю закрыть расширенную область.

 .expand__close { position: absolute; top: 10px; right: 20px; color: #454545; font-size: 50px; line-height: 50px; text-decoration: none; } .expand__close:before { content: '×'; } .expand__close:hover { color: #fff; } 

Обратите внимание, что с помощью псевдоэлемента :before мы можем вставить символ «×» на страницу без его появления в DOM, снова сохранив хотя бы один HTTP-запрос. Вставленный специальный символ — это символ умножения, который также использует Boostrap .

JQuery

Наконец, приведенный ниже jQuery просто переключается между .is-expanded и .is-collapsed при нажатии каждой ячейки изображения и кнопки закрытия.

 var $cell = $('.image__cell'); $cell.find('.image--basic').click(function() { var $thisCell = $(this).closest('.image__cell'); if ($thisCell.hasClass('is-collapsed')) { $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed'); $thisCell.removeClass('is-collapsed').addClass('is-expanded'); } else { $thisCell.removeClass('is-expanded').addClass('is-collapsed'); } }); $cell.find('.expand__close').click(function() { var $thisCell = $(this).closest('.image__cell'); $thisCell.removeClass('is-expanded').addClass('is-collapsed'); }); . var $cell = $('.image__cell'); $cell.find('.image--basic').click(function() { var $thisCell = $(this).closest('.image__cell'); if ($thisCell.hasClass('is-collapsed')) { $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed'); $thisCell.removeClass('is-collapsed').addClass('is-expanded'); } else { $thisCell.removeClass('is-expanded').addClass('is-collapsed'); } }); $cell.find('.expand__close').click(function() { var $thisCell = $(this).closest('.image__cell'); $thisCell.removeClass('is-expanded').addClass('is-collapsed'); }); . var $cell = $('.image__cell'); $cell.find('.image--basic').click(function() { var $thisCell = $(this).closest('.image__cell'); if ($thisCell.hasClass('is-collapsed')) { $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed'); $thisCell.removeClass('is-collapsed').addClass('is-expanded'); } else { $thisCell.removeClass('is-expanded').addClass('is-collapsed'); } }); $cell.find('.expand__close').click(function() { var $thisCell = $(this).closest('.image__cell'); $thisCell.removeClass('is-expanded').addClass('is-collapsed'); }); . var $cell = $('.image__cell'); $cell.find('.image--basic').click(function() { var $thisCell = $(this).closest('.image__cell'); if ($thisCell.hasClass('is-collapsed')) { $cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed'); $thisCell.removeClass('is-collapsed').addClass('is-expanded'); } else { $thisCell.removeClass('is-expanded').addClass('is-collapsed'); } }); $cell.find('.expand__close').click(function() { var $thisCell = $(this).closest('.image__cell'); $thisCell.removeClass('is-expanded').addClass('is-collapsed'); }); 

Конечно, вы можете легко избежать jQuery, используя `classList ()` и другие нативные методы, но вы не получите такой глубокой поддержки браузера, если не захотите полифилл.

Создание адаптивной сетки

Наличие 5 ячеек изображения в каждой строке на небольших устройствах не является идеальным, поэтому мы можем изменять количество элементов в строке, используя медиа-запросы. Например, приведенный ниже CSS уменьшает его до 2 изображений в строке.

 @media only screen and (max-width: 530px) { .image__cell { width: 50%; } .image__cell:nth-of-type(2n+2) .image--expand { margin-left: -100%; } .image__cell:nth-of-type(2n+3) { clear: left; } .image--expand { width: 200%; } } 

Чтобы предотвратить применение CSS, ранее относящегося к 5 элементам в строке, нам нужно будет либо сбросить эти значения, либо извлечь свойства и поместить их в собственный медиазапрос, что делается в приведенном ниже CodePen вместе с предыдущим кодом.