Ajax with Scroll - Flickr Feed

Ajax with Scroll - Flickr Feed

by Nirvanachain

HTML

<h1>Resize the rendered content window to view the responsive aspect of this fiddle</h1>

CSS

.flickerImg{
    margin: 5px;
    border: 2px solid lightgrey;
    border-radius: 10%;
}
.pageTextWrap{
  border-top: 2px solid lightgrey;
  border-bottom: 2px solid lightgrey;
}

@media (min-width: 240px) {
  body{
    font-size: 150%;
    color: red;
  }
  .flickerImg{
    width: 75%;
    border: 0.1em solid red;
  }
   .pageTextWrap:after{
        content: 'width is minimum of 240px'
    }
}

@media (min-width: 540px) {
  body{
    font-size: 100%;
    color: #000;
    font-weight: bold;
  }
  .flickerImg{
    width: 35%;
    border: 0.2em solid #000;
  }
   .pageTextWrap:after{
        content: 'width is minimum of 540px'
    }
  
}

@media (min-width: 940px) {
  body{
    font-size: 100%;
    color: blue;
  }
  .flickerImg{
    width: 25%;
    border: 0.2em solid blue;
  }
   .pageTextWrap:after{
        content: 'width is minimum of 940px'
    }
  
}

JavaScript

/* Flickr search API - http://www.flickr.com/services/api/explore/flickr.photos.search */
var settings = {
    searchQuery: 'puppy,candy,cats',
    tagQuery: 'puppy,candy,cats',
    tagMode: 'all',
    picsPerPage: '10',
    currPage: 1
}

var flickrmodule = (function (s) {

    // initialization constructor
    var flickrFeedModule = function () {
        
        this.callMorePhotos(s.currPage);
        
        // add listener for 'scroll' events if one doesn't already exist
        if (document.addEventListener){
            document.addEventListener('scroll',  flickrFeedModule.prototype.scrollMorePics, false);
        }else{
            document.attachEvent('scroll',  flickrFeedModule.prototype.scrollMorePics);
        }
        
    };

    // prototype functions
    flickrFeedModule.prototype = {
        constructor: flickrFeedModule,
        pickMe: function () {
            console.log('Resize the rendered content window to view the responsive aspect of this fiddle');
        },
        scrollMorePics: function(){
            
            console.log('Let\'s see more puppies, candy, and cats!');

            // if we're close to the bottom of the pag get more pictures
            if ($(window).scrollTop() + $(window).height() > $(document).height() - 50){
                
                flickrFeedModule.prototype.callMorePhotos(s.currPage);

            };

        },
        callMorePhotos: function (p) {
            // ajax call to flickr json
            $.ajax({
                url: '//api.flickr.com/services/rest/?method=flickr.photos.search&api_key=a2978e5ce30c337e3b639172d3e1a0d1&tags=' + s.searchQuery + '&tag_mode=' + s.tagMode + '&page=' + s.currPage + '&per_page=' + s.picsPerPage + '&format=json&jsoncallback=?',
                dataType: 'jsonp',
                data: JSON,
                success: function (data) {

                    // start assembling some dom elements to wrap around each page
                    var pageTxtWrap =...