Intereting Posts
Поиск центра полигона Листовки? Эффект отражения изображения с использованием чистого CSS Добавление поля вверх в контейнерную загрузку jquery скрывает текстовый контент в теге, а не сам тег Стропы с точными совпадениями Прочитайте HTML-файл из папки и поместите его содержимое в блок веб-сайта, используя asp.net MVC C # Есть ли что-нибудь в спецификации CSS, которая позволяет свойство процента относиться к определенному элементу / свойству? Изображение GIF Loader не анимируется во время вызова ajax Как клонировать ряд входов вместе с функцией родительского элемента? Использование 3D-трансфокатора не работает в IE11 (у меня разные) jQuery Movable Modal Диалоговое окно центрирование div без настройки ширины как подсчитать общие узлы между двумя узлами в sql Как установить пустую высоту пролета, равную высоте линии по умолчанию? Получение загрузочного столбца для работы

Flex, AngularJS + масонство, akoenig / угло-deckgrid и более

Я отправлял эти письма: я собираюсь выпустить приложение для защиты веб-приложений, которое требует использования такой сетки, как масонство. Я пробовал все, и каждый отдельный угловой модуль, директивы и различные подходы, в том числе основанные на CSS методы, чистая Vanilla JS и ваше решение – один из лучших вариантов, доступных в Интернете. Я обнаружил, однако, основную проблему, которая влияет не только на ваш подход, но и на каждый отдельный модуль или дополнительный модуль.

Проблема №1:

Ваше решение, как и любое другое решение, основано на массиве информации, которая уже обрабатывается угловыми. В примере вашего примера это будет source = “photos”. Теперь проблема возникает, когда есть две разные группы элементов. Предположим, что у меня есть группа элементов, которые ранее были определены в DOM. Другими словами:

This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.

Same happens with this content.

{{data.header}}

{{data.details}}

Теперь, как вы можете видеть в этом примере, содержимое внутри главного div должно быть полностью затронуто макетным макетом. Конечно, это псевдо-код, и я знаю, что синтаксис вашего подхода отличается. Однако то, что я пытаюсь представить здесь, заключается в том, что ваш модуль будет лучше, если вы сможете применить класическую решетку, такую ​​как grid, включая элементы, которые уже присутствуют в DOM / HTML на первом месте, с элементами, которые поступают из массива.

Проблема № 2:

Есть вторая проблема, которую я нашел в нескольких угловых модулях и подходах. Что произойдет, если у меня есть 2, 3 или, скажем, даже 16 divs, которые все они представляют такую ​​же кладку, как поведение? Должен признаться, я не пробовал его с вашим модулем, так как я не мог решить начальную проблему, что требует правильной обработки комбинации элементов, которые (1) предварительно определены в HTML, и (2 ) и функция ng-repeat.

Возможный подход:

Чтобы решить вторую проблему и первую, в то же время, я подумал, что лучший подход может заключаться в том, чтобы использовать classы элементов и идентификаторы элементов для обработки ситуации? Зачем? Поскольку он может легко применяться к элементам, которые уже присутствуют в DOM, в первую очередь, к элементам, которые динамически соединяются или выходят из-за использования ng-repeat или любой другой из угловых функций.

Вот пример того, что я говорю:

 

This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.

Same happens with this content.

{{data.header}}

{{data.details}}

В этом случае главный div определяет себя как id = «угловая-grid-папа-один», а также сообщает Угловому модулю, что элемент angular-grid-dad-one является контейнером div такой структуры, как кладка, и что его дети отмечены как угловой-сетчатый элемент. Как мы могли видеть на этой линии. ng-grid = “{‘dad’: ‘angular-grid-dad-one’, ‘childs’: ‘angular-grid-elem’}”

Таким образом, это позволяет нам использовать Угловой модуль в нескольких экземплярах. Например.

 

This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.

Same happens with this content.

{{data.header}}

{{data.details}}

This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.

Same happens with this content.

{{data.header}}

{{data.details}}

This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.

Same happens with this content.

{{data.header}}

{{data.details}}

Я использовал инструкцию Json в значении ng-grid, чтобы объяснить мою точку зрения, но на самом деле это не обязательно Json. Это может быть и два разных параплана:

 

This content is already here from the beginning, in the DOM, directly in the HTML, and I want to apply a Masonry like style on it.

Same happens with this content.

{{data.header}}

{{data.details}}

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

И будем надеяться, что благодаря следующей реализации HTML и CSS мы полностью контролируем эту ситуацию следующим поколением браузеров, я знаю о работе, которая требуется для создания этих сеток в Javascript.

На самом деле, я собираюсь выйти на конечность и сказать, что flex-wrap: wrap будет исправлять проблему.

 .holder { flex-wrap: wrap -moz-columns: 2 auto; box-sizing: border-box; display: flex; padding: 0 40px; width: 100%; }