yii2masonry, (*1)
===============, (*2)
Widget for masonry.js pinterest like layout container for Yii Framework 2
Original sources for the jquery plugin: http://masonry.desandro.com/, (*3)
, (*4)
How to install?
Get it via composer by adding the package to your composer.json:, (*5)
{
"require": {
"philippfrenzel/yii2masonry": "*"
}
}
And ensure, that you have the follwing plugin installed global:, (*6)
php composer.phar global require "fxp/composer-asset-plugin:~1.0", (*7)
Due to limitations of fxp/composer-asset-plugin you also need to add the following section to the "extra" section of your composer.json, (*8)
"asset-repositories": [
{
"name": "bower-asset/eventemitter",
"type": "bower-vcs",
"url": "git://github.com/Wolfy87/EventEmitter.git"
}
]
You may also check the package information on packagist., (*9)
Usage
On a page with a ListView, just add:, (*10)
[
'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>
CSS, (*11)
Size of columns can be defined within css, (*12)
.item { width: 25%; }
.item.w2 { width: 50%; }
If you have a sidebar resizeble by a button you need to reload the masonry container adding these following code:, (*13)
<?php
$script = <<< JS
$('a#menu_toggle').on('click', function() {
$('.js-masonry').masonry();
});
JS;
$this->registerJs($script, View::POS_READY);
?>
My button have an ID name #menu_toggle, (*14)
INFINITE SCROLL
Sample:, (*15)
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);
?>
'WgArbeiten',
'clientOptions' => [
'columnWidth' => 20,
'itemSelector' => '.flowers'
]
]); ?>
'WgArbeitenPjaxContainer']); ?>
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}
{pager}
'
]); ?>
'.flowers',
'paginationSelector' => '.pagination',
'containerSelector' => '#WgArbeitenPjaxContainer',
'pjaxContainer' => $pjax->id,
'pagination' => $dataProvider->pagination,
]);
?>
Wallogit.com
