1. yii2masonry
2. How to install?
3. Usage

yii2masonry ¶

Widget for masonry.js pinterest like layout container for Yii Framework 2 Original sources for the jquery plugin: http://masonry.desandro.com/

Demo: http://yii2fullcalendar.beeye.org/index.php/site/masonry Source: https://github.com/philippfrenzel/yii2masonry

How to install? ¶

Get it via composer by adding the package to your composer.json:

[json]
{
  "require": {
    "philippfrenzel/yii2masonry": "*"
  }
}

You may also check the package information on packagist.

Usage ¶

On a page with a ListView, just add:

<?php \philippfrenzel\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 \philippfrenzel\yii2masonry\yii2masonry::end(); ?>

Size of columns can be defined within css `css .item { width: 25%; } .item.w2 { width: 50%; } `