yii2masonry
===============
Widget for masonry.js pinterest like layout container for Yii Framework 2 Original sources for the jquery plugin: http://masonry.desandro.com/
Get it via composer by adding the package to your composer.json:
{
"require": {
"philippfrenzel/yii2masonry": "*"
}
}You may also check the package information on packagist.
On a page with a ListView, just add:
<?php \yii2masonry\yii2masonry::begin([
'clientOptions' => [
'columnWidth' => 50,
'itemSelector' => '.item'
]
]); ?>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<div class="item"><h3>Test</h3><p>Und mehr Text</p></div>
<?php \yii2masonry\yii2masonry::end(); ?>Size of columns can be defined within css
.item { width: 25%; }
.item.w2 { width: 50%; }