Masonry Image Gallery

	var page = 1;
	var keyword = "Candice+Swanepoel";
		
  $( function() {	
	  
	  function imgOnLoad(target,callback){
        // target内にあるimgタグを全て取得する
        var $images = target.find('img');

        // imgタグの数だけループを実行
        $images.each(function(){

            // imgタグの読み込みが完了している場合はここで処理をスキップする
            if (this.complete) {
                return;
            }

            // imgタグの読み込みが未完了の場合は読み込み完了時にcallbackを実行させる
            var $self = $(this);
            $self.on('load', function(){
                $self.off("load");  // imgタグにつけたloadイベントを削除

                if(callback){
                    // callback関数が渡されていればcallbackを実行
                    callback();
                }
            });
        });
    }
	    
		$.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": page, //ページ番号
			}).done(function(data) {
				var html = '';
				var photo = '';
				for (var i = 0; i < data.photos.photo.length; i++) {
					var f = data.photos.photo[i];
					html += '
';
				}
				$('#box-container').html(html);
				if (typeof oldIE === 'undefined' && Object.keys) {
					hljs.initHighlighting();
				}
				baguetteBox.run('#box-container');
				$('#box-container').imagesLoaded(function() {
					$('#box-container').masonry({
						itemSelector: 'li',
						transitionDuration: '0.3s'
					});
				});
			});		
			
		$('#imgkey').change(function(){
			page = 1;
			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": page, //ページ番号
			}).done(function(data) {
				var html = '';
				var photo = '';
				for (var i = 0; i < data.photos.photo.length; i++) {
					var f = data.photos.photo[i];
					html += '
';
				}
				$('#box-container').empty().html(html);
				if (typeof oldIE === 'undefined' && Object.keys) {
					hljs.initHighlighting();
				}
				baguetteBox.run('#box-container');
				$('#box-container').imagesLoaded(function() {
					var $content = $('#box-container');
					var masonry = new Masonry( $content[0], { itemSelector: 'li', transitionDuration: '0.3s' });
					imgOnLoad($content,resize);

					function resize(){
						masonry.layout();
					}
				});
			});		
		});
		
		$('#btn').click(function(){
			page += 1;
			$.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": 20, //取得件数
				"page": page, //ページ番号
			}).done(function(data) {
				var html = '';
				var photo = '';
				for (var i = 0; i < data.photos.photo.length; i++) {
					var f = data.photos.photo[i];
					html += '
';
				}
				$('#box-container').append(html);
				if (typeof oldIE === 'undefined' && Object.keys) {
					hljs.initHighlighting();
				}
				baguetteBox.run('#box-container');
				var $content = $('#box-container');
				$('#box-container').imagesLoaded(function() {
					var masonry = new Masonry( $content[0], { itemSelector: 'li', transitionDuration: '0.3s' });
					imgOnLoad($content,resize);

					function resize(){
						masonry.layout();
					}
				});
			});		
		});

	
		SyntaxHighlighter.all();			
  });
	
			

		<ul id="box-container"></ul>

	<nav class="next-navi text-center"> 
		<button id="btn" class="btn btn-info">次のページを読み込む</button>
	</nav>