Untitled

<!DOCTYPE html>

<head>
<link rel="stylesheet" type="text/css" href="css.css">
<style>
body {
    margin: 0;
}

h1 {
    text-align: center;
}

#images {
    margin: 0 auto;
    padding: 0;
    width: 640px;
    list-style-type: none;
}
</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<script>
	(function($){

  $.fn.endlessScroll = function(options) {

    var defaults = {
      bottomPixels: 50,
      fireOnce: true,
      fireDelay: 150,
      loader: "<br />Loading...<br />",
      data: "",
      insertAfter: "div:last",
      resetCounter: function() { return false; },
      callback: function() { return true; },
      ceaseFire: function() { return false; }
    };

    var options = $.extend({}, defaults, options);

    var firing       = true;
    var fired        = false;
    var fireSequence = 0;

    if (options.ceaseFire.apply(this) === true) {
      firing = false;
    }

    if (firing === true) {
      $(this).scroll(function() {
        if (options.ceaseFire.apply(this) === true) {
          firing = false;
          return; // Scroll will still get called, but nothing will happen
        }

        if (this == document || this == window) {
          var is_scrollable = $(document).height() - $(window).height() <= $(window).scrollTop() + options.bottomPixels;
        } else {
          // calculates the actual height of the scrolling container
          var inner_wrap = $(".endless_scroll_inner_wrap", this);
          if (inner_wrap.length == 0) {
            inner_wrap = $(this).wrapInner("<div class=\"endless_scroll_inner_wrap\" />").find(".endless_scroll_inner_wrap");
          }
          var is_scrollable = inner_wrap.length > 0 &&
            (inner_wrap.height() - $(this).height() <= $(this).scrollTop() + options.bottomPixels);
        }

        if (is_scrollable && (options.fireOnce == false || (options.fireOnce == true && fired != true))) {
          if (options.resetCounter.apply(this) === true) fireSequence = 0;

          fired = true;
          fireSequence++;

          $(options.insertAfter).after("<div id=\"endless_scroll_loader\">" + options.loader + "</div>");

          data = typeof options.data == 'function' ? options.data.apply(this, [fireSequence]) : options.data;

          if (data !== false) {
            $(options.insertAfter).after("<div id=\"endless_scroll_data\">" + data + "</div>");
            $("div#endless_scroll_data").hide().fadeIn();
            $("div#endless_scroll_data").removeAttr("id");

            options.callback.apply(this, [fireSequence]);

            if (options.fireDelay !== false || options.fireDelay !== 0) {
              $("body").after("<div id=\"endless_scroll_marker\"></div>");
              // slight delay for preventing event firing twice
              $("div#endless_scroll_marker").fadeTo(options.fireDelay, 1, function() {
                $(this).remove();
                fired = false;
              });
            }
            else {
              fired = false;
            }
          }

          $("div#endless_scroll_loader").remove();
        }
      });
    }
  };

})(jQuery);


</script>
<script>
$(document).ready(function() {
    $(document).endlessScroll({
        inflowPixels: 300,
        callback: function() {
      var $img = $('#images li:nth-last-child(5)').clone();
      $('#images').append($img);
        }
    });
});
</script>

</head>

<body>

<style>
div.fixed {
    position: fixed;
    bottom: 0;
    right: 100;
    width: 300px;

}
</style>

	<script src="jquery-1.12.0.min.js"></script>

<div class="fixed">

</div>

<html>
<center>
<body bgcolor="#FFE4C4">

<h1>
	<font size="300">
	<font color="white">
	C L
	<font color="black">
	X
	<font color="white">
	M A
	<font color="white">
	X
	</font>
</h1>
</center>
<ul id="images">
<li> <center>
	<img src= http://i.imgur.com/4YF4sTy.jpg height= "800" width= "550" />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/43nhQWM.jpg height= "800" width= "600" />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/bwaa22B.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/lYGALvJ.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/MH4LhTQ.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/B9sSHDf.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/o1Do3Nu.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/SNNi2DE.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/bFKD7Rf.jpg />
</li> </center>
<li> <center>
	<img src= Ihttp://i.imgur.com/JqwJvjJ.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/Fo5GBr0.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/ByZ9hRk.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/mVLBT0i.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/IEV593d.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/PXZYfDQ.gif />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/EbFJRxP.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/WWDvlog.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/qB3ST6O.gif />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/Axsgggy.jpg />
</li> </center>
<li> <center>
	<img src= http://i.imgur.com/uxH4Pzk.jpg />
</li> </center>
</ul>


<script src="jquery.js"></script>
<script src="jquery.lazyload.js"></script>

</body>
</html>