README

yii2masonry

===============

为Yii框架2开发的masonry.js Pinterest样式布局容器小部件。jQuery插件的原始来源：http://masonry.desandro.com/

如何安装？

通过composer添加包到您的composer.json文件来获取它。

{
  "require": {
    "philippfrenzel/yii2masonry": "*"
  }
}

并且确保您已全局安装以下插件：

php composer.phar global require "fxp/composer-asset-plugin:~1.0"

由于fxp/composer-asset-plugin的限制，您还需要将以下部分添加到您的composer.json文件的"extra"部分。

"asset-repositories": [
  {
    "name": "bower-asset/eventemitter",
    "type": "bower-vcs",
    "url": "git://github.com/Wolfy87/EventEmitter.git"
  }
]

您也可以在packagist上检查包信息。

使用方法

在具有ListView的页面上，只需添加以下内容：

<?php \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 \yii2masonry\yii2masonry::end(); ?>

CSS

列的大小可以在CSS中定义

  .item { width: 25%; } 
  .item.w2 { width: 50%; }

如果您有一个可以由按钮调整大小的侧边栏，您需要重新加载masonry容器，添加以下代码

<?php
$script = <<< JS
    $('a#menu_toggle').on('click', function() {
        $('.js-masonry').masonry();
    });
JS;
$this->registerJs($script, View::POS_READY);
?>
  

我的按钮ID为#menu_toggle

无限滚动示例

use yii\helpers\Html;
use yii\widgets\ListView;
use yii\web\JsExpression;
use yii\widgets\Pjax;

/* @var $this yii\web\View */
/* @var $searchModel app\models\PolizzenserviceSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */

$script = <<<SKRIPT
$('#boxes').on('infinitescroll:afterRetrieve', function(){
    msnryWgArbeiten.masonry('reloadItems');
    mscontainerWgArbeiten.imagesLoaded(function(){ msnryWgArbeiten.masonry() });
});

$(document).on('submit', '#WgArbeitenSearchform', function(event) {
  $.pjax.submit(event, '#WgArbeitenPjaxContainer')
});
SKRIPT;
$this->registerJs($script);
    
?>

<?php \yii2masonry\yii2masonry::begin([
    'id' => 'WgArbeiten',
    'clientOptions' => [
        'columnWidth' => 20,
        'itemSelector' => '.flowers'
    ]
]); ?>

<div id="boxes">
<?php $pjax = Pjax::begin(['id'=>'WgArbeitenPjaxContainer']); ?>
<?php echo $this->render('@app/views/arbeiten/_search', ['model' => $searchModel]); ?>
<?= \yii\widgets\ListView::widget([
    'dataProvider' => $dataProvider,
    'itemOptions' => ['class' => 'flowers'],
    'itemView' => '@app/views/arbeiten/iviews/_view',
    'summary' => false,
    'layout' => '{items}<div style="visibility:hidden;">{pager}</div>'
]); ?>

<?php
echo \darkcs\infinitescroll\InfiniteScrollPager::widget([
    'itemSelector' => '.flowers',
    'paginationSelector' => '.pagination',
    'containerSelector' => '#WgArbeitenPjaxContainer',
    'pjaxContainer' => $pjax->id,
    'pagination' => $dataProvider->pagination,
]);
?>
<?php Pjax::end(); ?>    
</div>

<?php \yii2masonry\yii2masonry::end(); ?>