Сетка/плитка с угловыми

Question

У меня есть 100 номеров div s шириной 100 пикселей, которые могут вписываться в родительскую ширину 250 пикселей. Независимо от высоты, мне нужно, чтобы div s отображался в строках, как показано на рисунке. Я попытался разрешить это с помощью css, и, к сожалению, я понял реальность.

Есть ли angularjs плагин я могу использовать в?

Я слышал о jquery masonry, есть ли лучший вариант?

Как @Divyanshu Maithani попросил plunker с моей текущей проблемой, Пожалуйста, смотрите ссылку plunker ниже, в которой я пытался решить мою проблему с угловым масонством

<div masonry> 
    <div ng-repeat="item in items" class="masonry-brick item"> 
     {{item.name}} 
     <button class="toggle-button" ng-click="item.show=!item.show">show</button> 
     <div ng-if="item.show" class="hidden-box"> 
     This is a hidden box for {{$index+1}}th item. 
     </div> 
    </div> 
    </div> 

Plunker DEMO

И еще я ищу другие варианты, так как я не хочу закончить мой вопрос с помощью jquery-плагина, такого как угло-масонство. Любая помощь будет оценена. Спасибо

Answer 1

Идём на AngularJS Masonry. Вы можете увидеть демо на главной странице. И использовать его просто, используя masonry-brick класс:

<div masonry> 
    <div class="masonry-brick" ng-repeat="brick in bricks"> 
     <img ng-src="{{ brick.src }}" alt="A masonry brick"> 
    </div> 
</div> 

---

UPDATE

Для того, чтобы ваш masonry-brick не пересекаются друг с другом, вам нужно reloadmasonry всякий раз, когда вы show или hide внутренний div. Я добавил function, чтобы сделать это на ng-click, который также будет broadcast a masonry.reload Событие, чтобы перезагрузить то же самое.

Проверить this рабочий код.

JS

$scope.showItem = function(index) { 
    $scope.items[index].show = !($scope.items[index].show); 
    $scope.$broadcast('masonry.reload'); 
} 

HTML

<div masonry> 
    <div ng-repeat="item in items" class="masonry-brick item"> 
     {{item.name}} 
     <button class="toggle-button" ng-click="showItem($index)">show</button> 
     <button class="toggle-button" ng-click="remove($index)">X</button> 
     <div ng-if="item.show" class="hidden-box"> 
     This is a hidden box for {{$index+1}}th item. 
     </div> 
    </div> 
</div> 

---

EDIT

Там, кажется, проблема возникла из-за фа ct, что masonry перезагружается мгновенно, в то время как анимация перехода masonry требует времени. Я добавил некоторую продолжительность перехода и $timeout в this plunk.

Answer 2

Вот пример, который вы ищете.Нажмите link

Html/View

<div ng-repeat="item in items" class="item"> 
      {{item.name}} 
    <button class="toggle-button" ng-click="item.show=!item.show">show</button> 
      <div ng-if="item.show" class="hidden-box"> 
      This is a hidden box for {{$index+1}}th item. 
      </div> 
     </div> 

Надеется, что это будет полезно для вас.

Answer 3

Это возможно с помощью Pure CSS и HTML. Спецификации CSS 3 обеспечивают для column-gap & column-width свойство, которое позволяет определить промежуток между столбцами.

Популярные браузеры начали поддерживать то же самое (-webkit-column-width, -webkit-column-gap, -moz-column-width, -moz-column-gap все поддерживаются).

Таким образом, ширина и зазоры могут быть записаны следующим образом:

#columns { 
    -webkit-column-width: 220px; 
    -webkit-column-gap: 15px; 
    -moz-column-width: 220px; 
    -moz-column-gap: 15px; 
    column-width: 220px; 
    column-gap: 15px; 
} 

Я сделал скрипку, которая показывает рабочий пример. Прекрасно работает на Chrome, Firefox и Safari.

https://jsfiddle.net/nashcheez/3cf9qrap/3/