nerburish/yii2-masonry-view

ListView widget improved to use Masonry (http://masonry.desandro.com/)

Yii2 Masonry ListView Widget

Yii2 widget to extend the Yii2 ListView for use it as Masonry grid layout (http://masonry.desandro.com/), _(*1)

Widget demo screenshot: , _(*2)

Installation

The preferred way to install this extension is through composer., _(*3)

Either run, _(*4)

php composer.phar require --prefer-dist nerburish/yii2-masonry-view "*"

or add, _(*5)

"nerburish/yii2-masonry-view": "*"

to the require section of your composer.json file., _(*6)

Usage

The usage is similar to default ListView Widget (http://www.yiiframework.com/doc-2.0/yii-widgets-listview.html), _(*7)

You just need a dataProvider and prepare the item template for your model., _(*8)

In clientOptions you can pass the Masonry options to modify the plugin behavior (see http://masonry.desandro.com/options.html), _(*9)

You can also attach a cssFile for styling the grid., _(*10)

Exemple

We have this model:, _(*11)

class MyModel extends \yii\base\Model
{
    public $id;

    public $title;

    public $description;
}

And this item template named _item.php:, _(*12)

<h3><?= $model->title ?></h3>
<p><?= $model->description ?></p>

Finally, in our view, we run the widget:, _(*13)

<?php echo \nerburish\masonryview\MasonryView::widget([
    'dataProvider' => $dataProvider,
    'itemView' => '_item',
    'clientOptions' => [
      'gutterWidth' => 15,
    ],
    'cssFile' => [
        "@web/css/masonry-demo.css"     
    ]
]) ?>

Below, the css used for the demo:, _(*14)

/* ---- grid ---- */
.grid {
  box-sizing: border-box;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */
.grid-item {
  width: 20%;
  padding: 10px;  
  margin: 10px auto;
  float: left;
  background: #e4e4e4;
  border-radius: 5px;
}

You may be interested in Isotope Widget because implements Masonry and other layouts and funcionalities at once. https://github.com/nerburish/yii2-isotope-view, _(*15)

There is also a MatchHeight.js implementation of ListView widget: https://github.com/nerburish/yii2-match-height-view, _(*16)