Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
  <head>
    <title>Autoload</title>
    <!-- Bootstrap -->
    <link href="style.css" rel="stylesheet" media="screen">
  </head>
<body>
  
  <div id="container" class="photos">
    
  </div> <!-- #container -->
    <div id="bot">&nbsp;</div>
  
  <nav id="page_nav">
    <a href="pages/2.html"></a>
  </nav>
  
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
</body>
</html>
 
#container {
  margin: 0 auto;
  padding: 0;
}
.photo {
  width: 25%;
}
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}
.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}
/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}
.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}
/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}
/* End: Recommended Isotope styles */
 
    var offset = 0;
    var $container = $('#container');
    var $firstRun = true;
    function load() {
    
      var tumblr = $.getJSON("http://polerstuff.tumblr.com/api/read/json?num=10&type=photo&start="+offset+"&callback=?",
        
      function(data) {  
          
         $.each(data.posts, function(i,item){            
            if($firstRun){
                $container.append('<img class="photo" src="'+this['photo-url-400']+'" />');
            } else {
              var $newItems = $('<img class="photo" src="'+this['photo-url-400']+'" />');
              $container.append( $newItems ).isotope( 'appended', $newItems );
            }
          
         });
      
      });
      
      tumblr.complete(function(){ 
        
        $container.isotope({
        // options
        layoutMode: 'masonry',
        itemSelector : '.photo'
       });
      });
      
      offset+=10;
      $firstRun = false;
    }
    
    $(window).load(function(){ 
    load();
            $container.isotope({
        // options
        layoutMode: 'masonry',
        itemSelector : '.photo'
    });
        $(window).scroll(function () {     
            var top = $(window).scrollTop();
            var bottom = $("#bot").height() + $("#bot").offset().top;
            var winHeight = window.innerHeight ? window.innerHeight : $(window).height();
            var winBot = top + winHeight;
            if (bottom  < winBot ) load().delay(800);
        });
    });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
iamkeithmasonpro
0viewers