¿Qué es Masonry yii2 ListView Widget?

Masonry yii2 es una extensión del widget ListView de yii2 que implementa el componente javascript Masonry js. El widget ListView modifica la disposición de los elementos de una lista para que se aproveche al máximo el espacio vertical disponible.

Instalación

Para realizar la instalación mediante composer:

Ejecutando:

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

O añadiendo la siguiente línea en la sección “requiere” del archivo composer.json

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

Uso del Widget

El uso es similar al widget ListView de yii2

Sólo se necesita un dataProvider y preparar la vista del modelo.

En el parámetro clientOptions se pueden pasar las opciones del plugin Masonry.js para modificar su comportamiento original. Puedes consultar las opciones disponibles aquí: 

Mediante el parámetro “cssFile” se puede añadir la ruta de un archivo css para darle estilo al widget.

Ejemplo

Tenemos el modelo de ejemplo MyModel:

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

En el template del elemento item.php tenemos lo siguiente:

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

Finalmente, en la vista añadimos el widget:

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

A continación, el css usado para la demo:

/* ---- 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;
}