15/07/2018: Créez un mur d'informations façon Pinterest

Le style Pinterest est assez sympathique, car son affichage dynamique en colonnes responsives permet de bien remplir l'écran. Pinterest garde jalousement son CSS, mais de nombreux templates (wordpress et autres) on adopté ce style, ainsi que le plus artisitique "Masonry" qui est devenu légendaire en tant que mozaïque d'images. Mais si vous ne voulez pas forcément acheter le template qui va avec, et si vous souhaitez l'intégrer dans une de vos pages, en dur ou même sur wordpress, voici un solution, Freewall de Kombai, que l'on trouve sur Github, alias Minh Nguyen, distribué avec la licence MIT (open source).
C'est un package CSS qui propose quatre variantes, Flex et Windows (masonry), "image layout" (répartition hosizontale) et pinterest. Le CSS diffère évidemment, mais avec une base commune.

Comment le mettre en oeuvre ?
Mettons que vous travaillez sur une page "en dur", il faudra incorporer les fichiers suivants, d'abord le style:
[php]
<link rel="stylesheet" type="text/css" href="
www.site.org/freewall-master/example/css/pinterest-style.css" />
[/php]

Ensuite les scripts, un général (banque jquery, vérifiez que vous ne l'avez pas déjà déclarée dans votre header), et un spécifique au mur.


[php]

<script type="text/javascript" src="
www.site.org/freewall-master/example/js/jquery-1.10.2.min.js"></script>

<script type="text/javascript" src="www.site.org/freewall-master/freewall.js"></script>
[/php]

Donc en se débrouillant bien, vous n'avez besoin que de deux entrées à charger pour cette page spécifique.

Vient ensuite la phase d'intégration sur la page.
Le script spécifique au mur, personnalisable:

[php]
		<style type="text/css">
			body {
				background: rgba(231, 231, 231, 0.43);
			}
			.free-wall {
				margin: 15px;
			}
			.brick {
				width: 221.2px;
			}
			.info {
				padding: 15px;
				color: #333;
			}
			.brick img {
				margin: 0px;
				padding: 0px;
				display: block;
			}
		</style>

[/php]

La structure doit comprendre dans votre architecture:


[php]
<div id="freewall" class="free-wall">
		    <div class="brick">
		        <img src="/path/to/image.jpg" width="100%">
		        <div class="info">
		            <h3>Titre1</h3>
		            <h5>Sous titre 1</h5>
		        </div>
		    </div>
		    <div class="brick">
		        <img src="/path/to/image.jpg" width="100%">
		        <div class="info">
		            <h3>Titre 2</h3>
		            <h5>Sous titre 2</h5>
		        </div>
		    </div>
		    <div class="brick">
		        <img src="/path/to/image.jpg" width="100%">
		        <div class="info">
		            <h3>Titre 3</h3>
		            <h5>Sous titre 3</h5>
		        </div>
		    </div>
</div>
[/php]

Enfin juste avant le div de fermeture ou votre footer, placez ce script:


[php]
<script type="text/javascript">
			var wall = new Freewall("#freewall");
			wall.reset({
				selector: '.brick',
				animate: true,
				cellW: 200,
				cellH: 'auto',
				onResize: function() {
					wall.fitWidth();
				}
			});
			wall.container.find('.brick img').load(function() {
				wall.fitWidth();
			});
		</script>
[/php]

Terminé. Reste à rafraichir la page.
On ne voit ici que trois images, mais pour se rendre compte de la structure il faut en avoir une vingtaine pour se faire une idée.
On peut croiser ça avec des popups bootstrap pour le meilleur effet, avoir un complément d'infos et faire mieux que Pinterest.

Seul bémol: Le CSS est complet et prend la main sur votre CSS actuel (header). Il va falloir le "dégraisser" pour éviter qu'il prenne le pas sur les styles courants de titres, liens, arrières-plans, paddings, etc. Et garder un style cohérent. Donc un peu de travail en perspective.

J'ajoute qu'avec le script PHP qui va bien on peut créer un template d'affichage pour des actualités, et de là, se créer un beau Newswall...