BlocksIt.js

 		var winWidth = $(window).width();
		var col;
		
		if(winWidth < 360) {
			col = 2
		} else if(winWidth < 660) {
			col = 3
		} else if(winWidth < 880) {
			col = 4
		} else if(winWidth < 1100) {
			col = 5;
		} else {
			col = 12;
		}
		$.getJSON('https://api.flickr.com/services/rest/?format=json&jsoncallback=?', {
			"api_key": "cc33804f6624eaea05252740e5972e95",
			"method": "flickr.photos.search", //写真検索
			"text": keyword, //検索語
			"sort": "relevance", //並べ替え relevanceは関連度の高い順
			"extras": "url_m", //写真サイズ
			"per_page": 61, //取得件数
			"page": 1, //ページ番号
		}).done(function(data) {
			var html = '';
			var photo = '';
			for (var i = 0; i < data.photos.photo.length; i++) {
				var f = data.photos.photo[i];
				html += '<div class="grid"><div class="imgholder"><a href="' + f["url_m"] + '" data-lightbox="lightbox" title="' + f["title"] + '"><img src="' + f["url_m"] + '" /></a></div></div>';
			}
			$('#box-container').html(html);
			$('#box-container').imagesLoaded(function() {
				$('#box-container').BlocksIt({
					numOfCol: col,
					offsetX: 1,
					offsetY: 1
				});
			});
		});
		
		$('#imgkey').change(function(){
			keyword = $(this).val();
			$.getJSON('https://api.flickr.com/services/rest/?format=json&jsoncallback=?', {
				"api_key": "cc33804f6624eaea05252740e5972e95",
				"method": "flickr.photos.search", //写真検索
				"text": keyword, //検索語
				"sort": "relevance", //並べ替え relevanceは関連度の高い順
				"extras": "url_m", //写真サイズ
				"per_page": 61, //取得件数
				"page": 1, //ページ番号
			}).done(function(data) {
				var html = '';
				var photo = '';
				for (var i = 0; i < data.photos.photo.length; i++) {
					var f = data.photos.photo[i];
					html += '<div class="grid"><div class="imgholder"><a href="' + f["url_m"] + '" data-lightbox="lightbox" title="' + f["title"] + '"><img src="' + f["url_m"] + '" /></a></div></div>';
				}
				$('#box-container').html(html);
				$('#box-container').imagesLoaded(function() {
					$('#box-container').width(conWidth);
					$('#box-container').BlocksIt({
						numOfCol: col,
						offsetX: 1,
						offsetY: 1
					});
				});
			});
		});
			
	<div id="box-container"></div>
			
ページトップへ戻る