Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/philippfrenzel/yii2masonry
masonry layout extension for yii2
https://github.com/philippfrenzel/yii2masonry
Last synced: about 2 months ago
JSON representation
masonry layout extension for yii2
- Host: GitHub
- URL: https://github.com/philippfrenzel/yii2masonry
- Owner: philippfrenzel
- License: mit
- Created: 2014-02-11T12:35:43.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2019-05-03T07:59:24.000Z (over 5 years ago)
- Last Synced: 2024-10-18T00:35:49.775Z (2 months ago)
- Language: PHP
- Size: 87.9 KB
- Stars: 13
- Watchers: 4
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
yii2masonry
===============
Widget for masonry.js pinterest like layout container for Yii Framework 2
Original sources for the jquery plugin: http://masonry.desandro.com/
[](https://packagist.org/packages/philippfrenzel/yii2masonry)
[](https://travis-ci.org/philippfrenzel/yii2masonry)
[](https://codeclimate.com/github/philippfrenzel/yii2masonry)
[](https://www.versioneye.com/php/philippfrenzel:yii2masonry)
[](https://packagist.org/packages/philippfrenzel/yii2masonry)
How to install?
---------------
Get it via [composer](http://getcomposer.org/) by adding the package to your `composer.json`:
```json
{
"require": {
"philippfrenzel/yii2masonry": "*"
}
}
```
And ensure, that you have the follwing plugin installed global:
> php composer.phar global require "fxp/composer-asset-plugin:~1.0"
Due to limitations of `fxp/composer-asset-plugin` you also need to add the following section to the `"extra"` section of your `composer.json`
"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](https://packagist.org/packages/philippfrenzel/yii2masonry).
Usage
-----
On a page with a ListView, just add:
```php
[
'columnWidth' => 50,
'itemSelector' => '.item'
]
]); ?>
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
Test
Und mehr Text
```
**CSS**
Size of columns can be defined within css
```css
.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:
```php
registerJs($script, View::POS_READY);
?>
```
My button have an ID name #menu_toggle
***INFINITE SCROLL***
Sample:
```php
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 = <<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,
]);
?>
```