Masonry Hybrid / Дизайн / Плагины Bootstrap

Версия: v1.0.0

Каталог: Плагины Bootstrap

Категория: Дизайн

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 11.2 Kb

Уникальный ID: 1279

Посмотрели: 1883 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 53 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://plugin.bearsthemes.com/jquery/MasonryHybrid/

Информация: Пользователям

Информация: Правообладателям

Теги: masonry, Plugin, jQuery, Bootstrap, Isotope

Поделился: BootstrapТема

Добавлено: 2016-09-08 в 11:18

Метка: 1588913582

⇄ ⇅

<div class="container">
 <div class="row">
 <div class="col-md-12">
 <h1>Masonry Hybrid - Multiple Columns & Resize Item</h1>
 </div>
 </div>
 <hr />
 <div class="row">
 <div class="col-md-12">
 <h2>Masonry Hybrid</h2>
 </div>
 <div class="col-md-6">
<pre>
// Library 
&lt;link rel=&quot;stylesheet&quot; href=&quot;https://code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css&quot;&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;https://code.jquery.com/jquery-3.1.0.min.js&quot;&gt;&lt;/script&gt; 
&lt;script src=&quot;https://code.jquery.com/ui/1.12.0/jquery-ui.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;https://bootstraptema.ru/plugins/2016/masonry-hybrid/isotope.pkgd.min.js&quot;&gt;&lt;/script&gt; 
&lt;script type=&quot;text/javascript&quot; src=&quot;https://bootstraptema.ru/plugins/2016/masonry-hybrid/jquery.masonry-hybrid.min.js&quot;&gt;&lt;/script&gt;

// Html
&lt;div id=&quot;masonry_hybrid_demo1&quot;&gt; 
 &lt;div class=&quot;grid-sizer&quot;&gt;&lt;/div&gt; 
 &lt;div class=&quot;gutter-sizer&quot;&gt;&lt;/div&gt; 
 &lt;div class=&quot;grid-item&quot;&gt;...&lt;/div&gt; 
 &lt;div class=&quot;grid-item&quot;&gt;...&lt;/div&gt; 
 ... 
&lt;/div&gt;
</pre>
<pre>
// JS
var $grid_demo_classic = $('#masonry_hybrid_demo1');
new MasonryHybrid($grid_demo_classic);
</pre>
 </div>
 <div class="col-md-6">
 <div class="masonry-hybrid-wrap">
 <div id="masonry_hybrid_demo1">
 <div class="grid-sizer"></div>
 <div class="gutter-sizer"></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=600&h=600&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=500&h=200&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=540&h=420&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=320&h=400&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=720&h=400&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=600&h=400&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=600&h=600&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=600&h=600&q=80&cs=tinysrgb" alt=""></div>
 </div>
 </div>
 </div>
 </div>
 <hr />
 <div class="row">
 <div class="col-md-12">
 <h2>Masonry Hybrid - Multiple Columns</h2>
 </div>
 <div class="col-md-6">
<pre>
// JS
var $grid_demo_multiple_columns = $('#masonry_hybrid_demo2');
var grid = new MasonryHybrid($grid_demo_multiple_columns, {col: 3, space: 10});

// Update col & space
grid.elem.trigger('grid:refresh', {col: 5, space: 20});
</pre>
 </div>
 <div class="col-md-6">
 <div class="masonry-hybrid-wrap">
 col: <input type="number" id="custom-col-gird" value="3" min="1" max="12"> 
 space: <input type="number" id="custom-col-space" value="10" min="0" max="30">
 <div id="masonry_hybrid_demo2">
 <div class="grid-sizer"></div>
 <div class="gutter-sizer"></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=600&h=600&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=500&h=200&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=540&h=420&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=320&h=400&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=720&h=400&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=600&h=400&q=80&cs=tinysrgb" alt=""></div>
 <div class="grid-item"><img src="https://images.unsplash.com/uploads/14135798609283698b7f3/a1364128?dpr=2&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80&cs=tinysrgb" alt=""></div>
 </div>
 </div>
 </div>
 </div>
 <hr />
 <div class="row">
 <div class="col-md-12">
 <h2>Masonry Hybrid - Resize & Filter</h2>
 </div>
 <div class="col-md-6">
 <pre>
// Css
#masonry_hybrid_demo3 .grid-item .grid-item-inner{ 
 position: relative; 
 background: #ececec; 
 width: 100%; 
 height: 100%; }

// Html
&lt;div id=&quot;masonry_hybrid_demo3&quot;&gt; 
 &lt;div class=&quot;grid-sizer&quot;&gt;&lt;/div&gt; 
 &lt;div class=&quot;gutter-sizer&quot;&gt;&lt;/div&gt; 
 &lt;div class=&quot;grid-item&quot;&gt;&lt;div class=&quot;grid-item-inner&quot;&gt;...&lt;/div&gt; &lt;/div&gt; 
 &lt;div class=&quot;grid-item&quot;&gt;&lt;div class=&quot;grid-item-inner&quot;&gt;...&lt;/div&gt; &lt;/div&gt; 
 &lt;div class=&quot;grid-item&quot;&gt;&lt;div class=&quot;grid-item-inner&quot;&gt;...&lt;/div&gt; &lt;/div&gt; 
 &lt;div class=&quot;grid-item&quot;&gt;&lt;div class=&quot;grid-item-inner&quot;&gt;...&lt;/div&gt; &lt;/div&gt; 
 ... 
&lt;/div&gt;
</pre>
<pre>
// JS
var $grid_demo_resize = $('#masonry_hybrid_demo3');
var grid3 = new MasonryHybrid($grid_demo_resize, {col: 3, space: 10});

// Use resize
var grid_resize = grid3.resize({
 celHeight : 180,
 sizeMap : [[2,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1],[1,1]],
 resize : true,
});

// Get Size Map
grid_resize.getSizeMap();

// Set Size Map & apply Size Map
grid_resize.setSizeMap([[2,2]]).applySize();

// Filter
grid3.grid.isotope({ filter: "filterValue" });
</pre>
 </div>
 <div class="col-md-6">
 <div class="masonry-hybrid-wrap">
 <div class="button-group filter-button-group">
 Filter: 
 <button data-filter="*">show all</button>
 <button data-filter=".category-a">Category A</button>
 <button data-filter=".category-b">Category B</button>
 <button data-filter=".category-c">Category C</button>
 </div>
 <div id="masonry_hybrid_demo3">
 <div class="grid-sizer"></div>
 <div class="gutter-sizer"></div>
 <div class="grid-item category-a"><div class="grid-item-inner"></div></div>
 <div class="grid-item category-a"><div class="grid-item-inner"></div></div>
 <div class="grid-item category-b"><div class="grid-item-inner"></div></div>
 <div class="grid-item category-c"><div class="grid-item-inner"></div></div>
 <div class="grid-item category-c"><div class="grid-item-inner"></div></div>
 <div class="grid-item category-b category-a"><div class="grid-item-inner"></div></div>
 <div class="grid-item category-a"><div class="grid-item-inner"></div></div>
 <div class="grid-item category-c category-b"><div class="grid-item-inner"></div></div>
 </div>
 <p><button id="getSizeMap">Get Size Map</button></p>
 <textarea id="sizeMapData" style="width: 100%;"></textarea>
 </div>
 </div>
 </div>

</div>

BootstrapTema

Masonry Hybrid

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0