j-Masonry

jComponent 20 · jcomponent@20 component Příklad načten s jComponent 20

Jednoduchá masonry složka. složka vydává Array podle velikosti displeje do sloupců.

Konfigurace:

lg {Number} (velký displej) šířka sloupce v procentech (předvolené: 25)
md {Number} (střední displej) šířka sloupce v procentech (předvolené: 33.33)
sm {Number} (malý displej) šířka sloupce v procentech (předvolené: 50)
xs {Number} (extra-malý displej) šířka sloupce v procentech (předvolený: 100)
NEW vdom {String} volitelný, položka jQuery selektor pro virtuální srovnání domů
NEW vdomattr {String} volitelné, název atributu pro srovnání virtuálních prvků domů (hodnoty z atributu budou srovnány mezi sebou)

Tangular Modelka:

value {Object} obsahuje surovou hodnotu z řady
index {Number} aktuální zpracovaná řada v sloupci
column {Number} - aktuální index sloupců
counter {Number} je aktuální index zpracovaných položek v řadě

Použijte ji s <ui-component name="masonry">Pokud je součástka ještě nezačleněna, jComponent Stáhnout ji na první použití z adresy DEF.fallback a) The Componentator CDN dle předvolby. autor: Peter Širka. zdroj: Componentator Výrobce je autorizován, MIT licence.

example.html

<ui-component name="masonry" path="pictures" config="sm:33.33">
	<script type="text/html">
		<div style="margin:10px;background:#F0F0F0;padding:20px"><img src="{{ value }}" class="img-responsive img-rounded" /></div>
	</script>
</ui-component>

<script>
	var pictures = ["https://cdn.pixabay.com/photo/2020/12/13/16/21/stork-5828727__340.jpg","https://cdn.pixabay.com/photo/2020/07/31/07/59/flowers-5452263__340.jpg","https://cdn.pixabay.com/photo/2020/03/14/00/23/building-4929371__340.jpg","https://cdn.pixabay.com/photo/2021/02/08/16/03/dinosaur-5995333__340.png","https://cdn.pixabay.com/photo/2020/12/02/00/56/mountains-5795880__340.jpg","https://cdn.pixabay.com/photo/2021/01/30/14/22/women-5963963__340.jpg","https://cdn.pixabay.com/photo/2021/02/05/21/10/church-5985941__340.jpg","https://cdn.pixabay.com/photo/2021/02/11/08/43/couple-6004642__340.jpg","https://cdn.pixabay.com/photo/2020/12/27/12/07/sunrise-5863751__340.png","https://cdn.pixabay.com/photo/2020/09/26/07/05/sea-5603352__340.jpg","https://cdn.pixabay.com/photo/2021/02/18/20/52/flower-6028389__340.jpg","https://cdn.pixabay.com/photo/2021/01/24/20/47/big-basin-redwood-state-park-5946500__340.jpg","https://cdn.pixabay.com/photo/2021/03/09/14/33/dog-6082017__340.jpg","https://cdn.pixabay.com/photo/2021/01/24/20/21/cloud-5946381__340.jpg","https://cdn.pixabay.com/photo/2021/02/12/09/36/sunflowers-6007847__340.jpg","https://cdn.pixabay.com/photo/2020/11/26/15/28/woman-5779323__340.jpg","https://cdn.pixabay.com/photo/2021/02/08/20/24/lake-5996427__340.jpg","https://cdn.pixabay.com/photo/2021/01/05/06/40/boat-5889919__340.png","https://cdn.pixabay.com/photo/2021/03/07/16/31/person-6076771__340.jpg","https://cdn.pixabay.com/photo/2021/02/06/16/29/jay-5988657__340.jpg", "https://cdn.pixabay.com/photo/2021/02/08/16/03/dinosaur-5995333__340.png","https://cdn.pixabay.com/photo/2020/12/27/12/07/sunrise-5863751__340.png","https://cdn.pixabay.com/photo/2021/01/24/20/21/cloud-5946381__340.jpg","https://cdn.pixabay.com/photo/2020/11/27/12/59/woman-5781862__340.jpg","https://cdn.pixabay.com/photo/2020/12/14/15/48/light-bulb-5831252__340.jpg","https://cdn.pixabay.com/photo/2021/01/13/03/27/wallpaper-5913128__340.png","https://cdn.pixabay.com/photo/2020/07/21/17/48/love-5426977__340.jpg","https://cdn.pixabay.com/photo/2020/01/09/01/00/eyes-4751572__340.png","https://cdn.pixabay.com/photo/2021/01/30/12/19/couple-5963678__340.png","https://cdn.pixabay.com/photo/2021/02/01/10/13/mandala-5970032__340.jpg","https://cdn.pixabay.com/photo/2021/01/23/07/53/dogs-5941898__340.jpg","https://cdn.pixabay.com/photo/2020/12/23/14/41/forest-5855196__340.jpg","https://cdn.pixabay.com/photo/2019/12/29/02/33/sand-4726119__340.jpg","https://cdn.pixabay.com/photo/2021/01/22/09/01/unicorn-5939500__340.png","https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg","https://cdn.pixabay.com/photo/2020/04/26/18/08/leaf-5096502_640.jpg", "https://cdn.pixabay.com/photo/2020/10/12/16/45/pattern-5649403__340.jpg"];
</script>