README

用于扩展Yii2 ListView以使用它作为Isotope网格的Yii2小部件（http://isotope.metafizzy.co/）

小部件演示截图：

安装

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

运行

php composer.phar require --prefer-dist nerburish/yii2-isotope-view "dev-master"

或在您的 composer.json 文件的require部分添加

"nerburish/yii2-isotope-view": "dev-master"

到

使用方法

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

您只需要一个dataProvider并为您的模型准备一个项模板。

在clientOptions中，您可以传递Isotope选项以修改插件行为（见http://isotope.metafizzy.co/options.html）

filterAttribute参数是作为网格-item标签的class使用的模型属性的名称。属性值可以是数组或由空格分隔的字符串。

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

示例

我们有一个这样的模型

class MyElement extends \yii\base\Model
{
	public $id;
	
	public $name;
	
	public $symbol;
	
	public $number;
	
	public $weight;
	
	public $categories;
}

以及名为_item.php的项模板

<h5 class="name"><?= $model->name ?></h5>
<p class="symbol"><?= $model->symbol ?></p>
<p class="number"><?= $model->number ?></p>
<p class="weight"><?= $model->weight ?></p>

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

<?php echo \nerburish\isotopeview\IsotopeView::widget([
	'dataProvider' => $dataProvider,
	'filterAttribute' => 'categories',
	'itemView' => '_item',
	'clientOptions' => [
		'layoutMode' => 'masonry',
	],
	'cssFile' => [
		"@web/css/grid-demo.css"		
	]
]) ?>

示例中使用的所有模型、视图和CSS样式都位于demo-data文件夹中。名为index.php的模板添加了过滤按钮以测试过滤方法。这是一个类似于Isotope文档中解释的示例（http://isotope.metafizzy.co/filtering.html）

<div class="button-group filters-button-group">
  <button class="button" data-filter="*">show all</button>
  <button class="button" data-filter=".metal">metal</button>
  <button class="button is-checked" data-filter=".transition">transition</button>
  <button class="button" data-filter=".alkali, .alkaline-earth">alkali and alkaline-earth</button>
  <button class="button" data-filter=":not(.transition)">not transition</button>
  <button class="button" data-filter=".metal:not(.transition)">metal but not transition</button>
  <button class="button" data-filter="numberGreaterThan50">number &gt; 50</button>
  <button class="button" data-filter="ium">name ends with –ium</button>
</div>

<?php $this->registerJs('
	var filterFns = {
	  // show if number is greater than 50
	  numberGreaterThan50: function() {
		var number = $(this).find(".number").text();
		return parseInt( number, 10 ) > 50;
	  },
	  // show if name ends with -ium
	  ium: function() {
		var name = $(this).find(".name").text();
		return name.match( /ium$/ );
	  }
	};	
	
	$(".filters-button-group").on( "click", "button", function() {
	  var filterValue = $( this ).attr("data-filter");
	  // use filterFn if matches value
	  filterValue = filterFns[ filterValue ] || filterValue;
	  $("#w0 .grid").isotope({ filter: filterValue });
	}); 
', $this::POS_END) ?>

<?php echo \nerburish\isotopeview\IsotopeView::widget([
	'dataProvider' => $dataProvider,
	'filterAttribute' => 'categories',
	'itemView' => '_item',
	'cssFile' => [
		"@web/css/grid-demo.css"		
	]
]) ?>

您可能还对MatchHeight.js ListView小部件感兴趣： https://github.com/nerburish/yii2-match-height-view