README

Yii2小部件，用于扩展Yii2 ListView，以便将其用作Masonry网格布局（http://masonry.desandro.com/）

小部件演示截图：

安装

安装此扩展的首选方式是通过 composer。

运行以下命令：

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

或者

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

将以下内容添加到您的 composer.json 文件的 require 部分。

使用方法

使用方法与默认的ListView小部件类似（https://yiiframework.cn/doc-2.0/yii-widgets-listview.html）

您只需要一个数据提供者和为您的模型准备项目模板。

在clientOptions中，您可以传递Masonry选项以修改插件行为（请参阅http://masonry.desandro.com/options.html）

您还可以附加一个cssFile来对网格进行样式化。

示例

我们有一个这个模型

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

以及这个名为 _item.php 的项目模板

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

最后，在我们的视图中运行小部件

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

下面是用于演示的CSS

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

您可能对Isotope小部件感兴趣，因为它一次实现了Masonry和其他布局和功能。 https://github.com/nerburish/yii2-isotope-view

还有一个ListView小部件的MatchHeight.js实现： https://github.com/nerburish/yii2-match-height-view

nerburish / yii2-masonry-view

维护者

详细信息

README

安装

使用方法

示例