Skip to content

Instantly share code, notes, and snippets.

@backsapce

backsapce/css

Last active August 29, 2015 14:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save backsapce/eb8dd28ba6ac2ccd74ac to your computer and use it in GitHub Desktop.
Save backsapce/eb8dd28ba6ac2ccd74ac to your computer and use it in GitHub Desktop.
Download ZIP
inifite scroll
Raw
css
body {
padding: 0px;
margin: 0px;
font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}
a {
color: #00B7FF;
}
.item{
height: 100px;
background: gray;
margin-top: 5px;
margin-bottom: 5px;
}
.end{
height: 100px;
background: gray;
margin-top: 5px;
margin-bottom: 5px;
}
.blank{
height: 20px;
}
Raw
html
<html>
<head>
<title>
</title>
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js">
</script>
<style type="text/css">
</style>
<script src="/javascripts/site.js">
</script>
</head>
<body style="zoom: 1;">
<div class="container">
<div class="item">
</div>
<a href="/news">
</a>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
<div class="item">
b
</div>
</div>
<div class="debug">
</div>
<div class="blank">
</div>
</body>
</html>
Raw
js
$(document).ready(function () {
var itemNum = $(window).height() / 50 | 11
//预先生成一些div
for (var i = 0; i < 20; i++) {
$('.container').append($('<div class="item">b</div>'))
}
function moreData() {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
console.log($('.loading').length)
if ($('.loading').length)
return
var item = $('<div class="item"></div>').hide()
var loading = $('<div class="loading">loding</div>')
var end = $('<div class="end">没啦</div>').hide()
$('.container').append(loading)
$.getJSON('/news').done( function (data) {
$(".loading").remove()
$('.end').remove()
if (data === null || data.message === '_end_') {
$('.container').append(end)
end.fadeIn(500)
}
else {
$('.container').append(item)
item.text(data.message).fadeIn(500)
}
})
}
}
$(window).scroll(moreData)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment