yii2-masonry Masonry (Pinterest Like Layout) wrapper for yii2

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

1 1
3 followers
0 downloads
Yii Version: 2.0
License: (not set)
Category: User Interface
Developed by: PinkBrainPlan
Created on: Nov 13, 2014
Last updated: 9 years ago

Related Extensions