j-Masonry

jComponent 20 · jcomponent@20 component Exempel laddat med jComponent 20

En enkel Masonry-komponent. komponenten gör en Array enligt skärmstorleken till kolumnerna.

Konfigurera:

lg {Number} (stor skärm) kolumn bredd i procent (default: 25)
md {Number} (medium display) kolumnbredd i procent (default: 33.33)
sm {Number} (små display) kolumnbredd i procent (default: 50)
xs {Number} (extra liten skärm) kolumn bredd i procent (default: 100)
NEW vdom {String} valfritt, en objekt jQuery-selektor för virtuell dom jämförelse
NEW vdomattr {String} valfritt, ett attributnamn för att jämföra virtuella domelement (värden från attributen kommer att jämföras mellan varandra)

Tangular modell:

value {Object} innehåller ett råvärde från array
index {Number} en aktuell bearbetad rad inom kolumnen
column {Number} en aktuell kolumnindex
counter {Number} en aktuell index av bearbetat objekt inom array

Använd den med <ui-component name="masonry">När komponenten ännu inte är laddad, jComponent Ladda ner den första gången från adressen i DEF.fallback (en av Componentator Författare: Peter Širka. källa: The Componentator Komponenterna i lager, MIT licens.

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>