j-Masonry

jComponent 20 · jcomponent@20 component Beispiel mit jComponent 20 geladen

Eine einfache Mauerwerkskomponente. Die Komponente rendert ein Array entsprechend der Anzeigegröße in Spalten.

Konfiguration:

lg {Number} (große Anzeige) Spaltenbreite in Prozent (Standard: 25)
md {Number} (mittlere Anzeige) Spaltenbreite in Prozent (Standard: 33.33)
sm {Number} (kleine Anzeige) Spaltenbreite in Prozent (Standard: 50)
xs {Number} (extrakleines Display) Spaltenbreite in Prozent (Standard: 100)
NEW vdom {String} optional, ein Item-jQuery-Selektor für den virtuellen Dom-Vergleich
NEW vdomattr {String} optional, ein Attributname zum Vergleichen virtueller Dom-Elemente (Werte aus dem Attribut werden miteinander verglichen)

Tangularmodell:

value {Object} enthält einen Rohwert aus dem Array
index {Number} eine aktuell verarbeitete Zeile innerhalb der Spalte
column {Number} ein aktueller Spaltenindex
counter {Number} ein aktueller Index des verarbeiteten Elements innerhalb des Arrays

Verwenden Sie es mit <ui-component name="masonry">. Wenn die Komponente noch nicht geladen ist, lädt jComponent sie bei der ersten Verwendung von der Adresse in DEF.fallback herunter (standardmäßig das CDN Componentator). Autor: Peter Širka. Quelle: Componentator-Komponenten-Repository, MIT-Lizenz.

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>