CSS- Как сделать панель изображений стиля Pinterest? [Дубликат]

Question

CSS- Как сделать панель изображений стиля Pinterest? [Дубликат]

В документации jQuery.fn.on есть хорошее объяснение.

Короче:

Обработчики событий привязаны только к выбранные в данный момент элементы; они должны существовать на странице, когда ваш код делает вызов .on().

Таким образом, в следующем примере #dataTable tbody tr должен существовать до генерации кода.
$("#dataTable tbody tr").on("click", function(event){
    console.log($(this).text());
});
Если на страницу вводится новый HTML-код, предпочтительнее использовать делегированные события для присоединения обработчика событий, как описано ниже.

Делегированные события имеют то преимущество, что они могут обрабатывать события от элементов потомков, которые будут добавлены в документ позже. Например, если таблица существует, но строки добавляются динамически с использованием кода, следующее будет обрабатывать ее:
$("#dataTable tbody").on("click", "tr", function(event){
    console.log($(this).text());
});
В дополнение к их способности обрабатывать события на дочерних элементах, которые еще не созданы, другим преимуществом делегированных событий является их потенциал для гораздо более низких накладных расходов, когда необходимо контролировать многие элементы. В таблице данных с 1000 строками в tbody первый пример кода прикрепляет обработчик к 1000 элементам.

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

Примечание. Делегированные события не работают для SVG .

35

html css image css3 flexbox

задан Michael_B 4 March 2017 в 17:02

5 ответов

Другие вопросы по тегам:

html css image css3 flexbox

Похожие вопросы:

score 4 · Answer 1

4

ответ дан Andrei Gheorghiu 20 August 2018 в 09:02

score 0 · Answer 2

Вы можете добиться эффекта каменной кладки в соответствии с вашим снимком экрана, но вы установили высоту внешнего div динамически

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
.item-list {
  max-width: 400px;
  border: 1px solid red;
  display: -ms-flexbox;
	-ms-flex-direction: column;
	-ms-flex-wrap: wrap;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	height: 100vw;
}
.item-list__item {
  border: 1px solid green;
  width: 50%;
}

<div class="item-list" >
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
    county enough the figure former add. Do sang my he next mr soon. It merely waited do unable.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do.
  </div>
  <div class="item-list__item">
    Is we miles ready he might going. Own books built put civil fully blind fanny. Projection appearance at of admiration no. As he totally cousins warrant besides ashamed do. Therefore by applauded acuteness supported affection it. Except had sex limits
  </div>
</div>

score 1 · Answer 3

подход column кажется хорошим компромиссом, если вы установите column-width через vmin или vmax единицы и drop column-count (первый фрагмент), display:grid и vmin также являются опцией для futur (второй фрагмент).

фрагмент вдохновлен ответом @Lanti.

тестовая демонстрация с vmin

.container {

}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  font-size: 0;
}

.portfolio ul {
  -webkit-column-width:50vmin;
     -moz-column-width:50vmin;
          column-width:50vmin;
  -webkit-column-fill:balance;
     -moz-column-fill:balance;
          column-fill:balance;
  -webkit-column-gap: 3px;
     -moz-column-gap: 3px;
          column-gap: 3px;
}

.portfolio ul:hover img {
  opacity: 0.3;
}

.portfolio ul:hover img:hover {
  opacity: 1;
}

.portfolio ul li {
  margin-bottom: 3px;
}

.portfolio ul li img {
  max-width: 100%;
  transition: 0.8s opacity;
}

<section class="container portfolio">
  <ul>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
  </ul>
</section>

ссылка среди других https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin- vmax /

display:grid coud делает это также простым с автозаполнением, но для этого требуется установить значение диапазона до самого высокого изображения, чтобы строки и столбцы могли inbricate

.container {}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  font-size: 0;
}

.portfolio ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50vmin, 1fr));
  grid-gap: 5px;
  grid-auto-rows: minmax(10px, 1fr);
  grid-auto-flow: dense;
}

.portfolio ul:hover img {
  opacity: 0.3;
}

.portfolio ul:hover img:hover {
  opacity: 1;
}

.portfolio ul li {
  margin-bottom: 3px;
}

.portfolio ul li img {
  max-width: 100%;
  transition: 0.8s opacity;
}

li {
  border: solid blue;
  grid-row-end: span 1;
  display: flex;
  align-items: center;
  background: lightgray;
}

li:nth-child(1),
li:nth-child(3),
li:nth-child(6),
li:nth-child(7),
li:nth-child(8),
li:nth-child(9),
li:nth-child(10),
li:nth-child(11) {
  border: solid red;
  grid-row-end: span 2
}

<section class="container portfolio">
  <ul>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
  </ul>
</section>

вы можете видеть https://css-tricks.com/snippets/css/complete-guide-grid/

Порядок изображений в первом фрагменте неверен, это проблема с размещением в столбцах. Но второй, похоже, на месте! Действительно мило — Guybrush Threepwood, 21 April 2017 в 13:36

score 0 · Answer 4

Вместо flexbox я рекомендую использовать столбцы для таких сеток. Как вы можете видеть, расстояние на нижних изображениях может быть лучше, но для собственного решения для CSS я считаю, что это довольно аккуратно. Нет больше JS:

.container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

ul {
  margin: 0;
  padding: 0;
}

ul li {
  list-style: none;
  font-size: 0;
}

.portfolio ul {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 3px;
  -webkit-column-gap: 3px;
  column-gap: 3px;
}

.portfolio ul:hover img {
  opacity: 0.3;
}

.portfolio ul:hover img:hover {
  opacity: 1;
}

.portfolio ul li {
  margin-bottom: 3px;
}

.portfolio ul li img {
  max-width: 100%;
  transition: 0.8s opacity;
}

<section class="container portfolio">
  <ul>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_2959-1400px.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-010.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/IMG_6188-dng-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151220-csaladi-peregi-046-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/20151230-csalad-szalai-0194-k.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/lantosistvan-portfolio-001(1).jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171819-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171829-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171938-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528171953-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528194754-portfolio.jpg" alt="" /></li>
    <li><img src="http://lantosistvan.com/temp/freecodecamp/160528184948-portfolio.jpg" alt="" /></li>
  </ul>
</section>

score 25 · Answer 5

Flexbox - это «одномерная» система компоновки: она может выравнивать элементы вдоль горизонтальных или вертикальных линий.

Истинная сетка «2-мерная»: она может выравнивать элементы вдоль горизонтальной и вертикальной линий. Другими словами, ячейки могут располагаться между столбцами и строками, которые невозможно выполнить с помощью flexbox.

Вот почему flexbox имеет ограниченную емкость для построения гридов. Это также является причиной того, что W3C разработал еще одну технологию CSS3, Grid Layout (см. Ниже).

В контейнере flex с flex-flow: row wrap элементы гибкости должны быть завернуты к новым строкам .

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

Обратите внимание, что div # 3 обертывается ниже div # 1 , создавая новую строку. Он не может упасть ниже div # 2 .

В результате, когда элементы не самые высокие в строке, остается пустое пространство, создавая неприглядные пробелы.

image credit: Jefree Sujit

`column wrap` Решение

Если вы переключитесь на flex-flow: column wrap, элементы гибки будут стекаться вертикально, а сетчатая компоновка более достижима. Однако контейнер с колоновым направлением имеет три потенциальные проблемы сразу:

Он расширяет контейнер горизонтально, а не вертикально (например, макет Pinterest).
Это требует, чтобы контейнер имел фиксированную высоту, поэтому элементы знают, где их можно обернуть.
На момент написания этой статьи у него есть недостаток во всех основных браузерах, где контейнер не работает 't расширяться для размещения дополнительных столбцов .

В результате контейнер со столбцом может быть невозможен во многих случаях.

Другие решения

Добавить контейнеры В первых двух изображениях выше рассмотрите обертывание элементов 2 и 3 в отдельный контейнер. Этот новый контейнер может быть одним из братьев к пункту 1. Выполнено. Вот подробный пример: Раскладка клавиатуры калькулятора с помощью flexbox . Один недостаток стоит выделить: если вы хотите использовать свойство order для повторной компоновки вашего макета (например, в медиа-запросах), этот метод может устранить эту опцию.
Desandro Masonry Масонство - это библиотека компоновки сетки JavaScript. Он работает, поместив элементы в оптимальное положение на основе имеющегося вертикального пространства, похожего на камни для камней в стене. источник: http://masonry.desandro.com/
Как создать сайт, который работает как Pinterest [ Pinterest] действительно классный сайт, но то, что я нахожу интересным, - это то, как эти пинборды выложены ... Поэтому цель этого учебника - воссоздать этот отзывчивый эффект блока ... source: https://benholland.me/javascript/2012/02/20/how-to-build-a-site-that-works-like-pinterest.html
Модуль компоновки CSS-сетки Уровень 1 Этот CSS-модуль определяет двумерную систему компоновки на основе сетки, оптимизированную для дизайна пользовательского интерфейса. В модели макета сетки дети контейнера сетки могут быть помещены в произвольные слоты в предопределенной гибкой или фиксированной сетке макета. источник: https://drafts.csswg.org/css-grid/ Пример компоновки сетки: Макетная кладка только для CSS, но с элементами, упорядоченными по горизонтали

CSS- Как сделать панель изображений стиля Pinterest? [Дубликат]

5 ответов

column wrap Решение

Другие решения

Похожие вопросы:

`column wrap` Решение