Yii 2.0: yii2-masonry

Masonry (Pinterest Like Layout) wrapper for yii2
3 followers

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%; }

Be the first person to leave a comment

Please to leave your comment.

Create extension
Downloads
No downloadable files yet