j-Masonry

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

Un simple composant de maçonnerie. Le composant restitue un tableau en fonction de la taille d'affichage des colonnes.

Configuration :

Largeur de colonne lg {Number} (grand écran) en pourcentage (par défaut : 25)
Largeur de colonne md {Number} (affichage moyen) en pourcentage (par défaut : 33.33)
Largeur de colonne sm {Number} (petit écran) en pourcentage (par défaut : 50)
Largeur de colonne xs {Number} (affichage extra-petit) en pourcentage (par défaut : 100)
NEW vdom {String} en option, un sélecteur d'élément jQuery pour comparer le dom virtuel
NEW vdomattr {String} facultatif, un nom d'attribut pour comparer les éléments du dom virtuel (les valeurs de l'attribut seront comparées entre elles)

Modèle Tangulaire :

value {Object} contient une valeur brute du tableau
index {Number} une ligne actuellement traitée dans la colonne
column {Number} un index de colonne actuel
counter {Number} un index actuel de l'élément traité dans le tableau

Utilisez-le avec <ui-component name="masonry">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

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>