jQueryとCSSのopacityを組み合わせて、画像をランダムなタイミングでフェードインさせます。

Ad

DEMO

HTML

<div class="photo">
	<div><img src="https://blog.grinee.net/demo/images/image1.png"></div>
	<div><img src="https://blog.grinee.net/demo/images/image2.png"></div>
	<div><img src="https://blog.grinee.net/demo/images/image3.png"></div>
	<div><img src="https://blog.grinee.net/demo/images/image4.png"></div>
	<div><img src="https://blog.grinee.net/demo/images/image5.png"></div>
	<div><img src="https://blog.grinee.net/demo/images/image6.png"></div>
	<div><img src="https://blog.grinee.net/demo/images/image7.png"></div>
	<div><img src="https://blog.grinee.net/demo/images/image8.png"></div>
</div>

CSS

見やすいように4枚ずつ並ぶようにしています。
好きにアレンジしてください。

.photo {
	display: flex;
	flex-wrap: wrap;
}
.photo > div {
	width: 25%;
}
.photo img {
	vertical-align: middle;
	width: 100%;
}

JavaScript

記述の前にjQueryの読み込みが必要です。

jQuery(function ($) {
	var $images = $('.photo img');

	$images.css('opacity', 0);

	// 画像をランダムにフェードインさせる順番を生成
	var order = [];
	$images.each(function (index) {
		order.push(index);
	});

	// ランダムに並べ替える
	order = order.sort(function () {
		return Math.random() - 0.5;
	});

	// 順番にフェードインさせる
	$.each(order, function (index, value) {
		$images.eq(value).delay(500 * index).animate({ opacity: 1 }, 1000);
	});
});