Skip to content

Instantly share code, notes, and snippets.

@Joseph7451797

Joseph7451797/waterFallExample.css

Last active July 21, 2017 15:32
Show Gist options
  • Save Joseph7451797/f1fbf014cc6571dd035fa3783648236f to your computer and use it in GitHub Desktop.
Save Joseph7451797/f1fbf014cc6571dd035fa3783648236f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin// source https://jsbin.com/fahohuy
Raw
waterFallExample.css
.postList {
height: 100px;
background: #dfdfdf;
border: 1px solid #333;
}
.loadReplysAnimate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
padding: 30px 0;
width: 24px;
height: 30px;
}
.loadReplysAnimate span {
display: inline-block;
vertical-align: top;
width: 4px;
height: 10px;
background: #2ca1f1;
}
.loadReplysAnimate span:first-child {
-webkit-animation: bounce .6s linear infinite alternate;
animation: bounce .6s linear infinite alternate;
}
.loadReplysAnimate span:nth-child(2) {
-webkit-animation: bounce .6s linear .2s infinite alternate;
animation: bounce .6s linear .2s infinite alternate;
}
.loadReplysAnimate span:last-child {
-webkit-animation: bounce .6s linear .4s infinite alternate;
animation: bounce .6s linear .4s infinite alternate;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 7px, 0);
transform: translate3d(0, 7px, 0);
}
50% {
-webkit-transform: translate3d(0, 14px, 0);
transform: translate3d(0, 14px, 0);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 7px, 0);
transform: translate3d(0, 7px, 0);
}
50% {
-webkit-transform: translate3d(0, 14px, 0);
transform: translate3d(0, 14px, 0);
}
}
Raw
waterFallExample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.postList {
height: 100px;
background: #dfdfdf;
border: 1px solid #333;
}
.loadReplysAnimate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
padding: 30px 0;
width: 24px;
height: 30px;
}
.loadReplysAnimate span {
display: inline-block;
vertical-align: top;
width: 4px;
height: 10px;
background: #2ca1f1;
}
.loadReplysAnimate span:first-child {
-webkit-animation: bounce .6s linear infinite alternate;
animation: bounce .6s linear infinite alternate;
}
.loadReplysAnimate span:nth-child(2) {
-webkit-animation: bounce .6s linear .2s infinite alternate;
animation: bounce .6s linear .2s infinite alternate;
}
.loadReplysAnimate span:last-child {
-webkit-animation: bounce .6s linear .4s infinite alternate;
animation: bounce .6s linear .4s infinite alternate;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 7px, 0);
transform: translate3d(0, 7px, 0);
}
50% {
-webkit-transform: translate3d(0, 14px, 0);
transform: translate3d(0, 14px, 0);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 7px, 0);
transform: translate3d(0, 7px, 0);
}
50% {
-webkit-transform: translate3d(0, 14px, 0);
transform: translate3d(0, 14px, 0);
}
}
</style>
</head>
<body>
<div class="postList">123</div>
<div class="postList">456</div>
<div class="postList">789</div>
<div class="postList">111</div>
<div class="postList">222</div>
<div class="postList">333</div>
<div class="postList">444</div>
<div class="postList">555</div>
<div class="postList">666</div>
<div class="postList">777</div>
<script id="jsbin-javascript">
var loadRplysTimer;
var loadReplysIsLoading = false;
var loadReplaysPage = 2;
var loadReplaysTotalPage = 10; // this value might be gotten from ajax
var t = 0; // use to record scrolltop, 0 is the initial value
var targets = document.getElementsByClassName('postList'); //
function loadReplysHandler() {
if( loadReplysIsLoading ) return; // while true, wait for finishing
if( loadReplaysPage > loadReplaysTotalPage ) {
window.removeEventListener('scroll', loadReplysHandler); // destroy waterfall
}
var w_scrolltop = window.pageYOffset;
var w_height = window.innerHeight;
var footerElem = targets[targets.length-1];
var footerElemTop = footerElem.offsetTop;
if( w_scrolltop + w_height - 100 > footerElemTop && w_scrolltop - t >= 5 && loadReplaysPage <= loadReplaysTotalPage) {
loadReplysIsLoading = true;
loadReplysAjax();
}
setTimeout(function() {
t = w_scrolltop;
}, 0);
}
function loadReplysAjax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if( xhr.readyState === 1 ) { // ajax start
var d = document.createElement('div');
d.id = 'postListLoading';
d.className = 'postList';
d.innerHTML = '<div class="loadReplysAnimate"><div class="post-border"></div><span></span><span></span><span></span></div>';
targets[targets.length-1].parentNode.insertBefore(d, targets[targets.length-1].nextElementSibling);
}
if( xhr.readyState === 4 ) { // ajax complete
if( xhr.status === 200 ) { // ajax success
var res = JSON.parse(xhr.responseText);
if( res.data ) {
loadReplysAppend(res.data);
}
}else { // ajax fail
console.log('Error: ' + xhr.status);
}
var loading = document.getElementById('postListLoading');
if( loading ) {
loading.remove();
}
loadReplysIsLoading = false;
}
};
xhr.open('GET', '/api.php?mod=viewthread&do=waterfall&tid=1&page=' + loadReplaysPage.toString() + '&ordertype=1');
xhr.send(null);
}
function loadReplysAppend(res) {
if( res ) {
var frag = document.createDocumentFragment();
var temp = document.createElement('temp');
var child;
temp.innerHTML = res;
while (child = temp.firstElementChild) {
frag.appendChild(child);
}
targets[targets.length-1].parentNode.insertBefore(frag, targets[targets.length-1].nextElementSibling);
loadReplaysPage++;
}
}
window.addEventListener('scroll', loadReplysHandler);
</script>
<script id="jsbin-source-css" type="text/css">.postList {
height: 100px;
background: #dfdfdf;
border: 1px solid #333;
}
.loadReplysAnimate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin: 0 auto;
padding: 30px 0;
width: 24px;
height: 30px;
}
.loadReplysAnimate span {
display: inline-block;
vertical-align: top;
width: 4px;
height: 10px;
background: #2ca1f1;
}
.loadReplysAnimate span:first-child {
-webkit-animation: bounce .6s linear infinite alternate;
animation: bounce .6s linear infinite alternate;
}
.loadReplysAnimate span:nth-child(2) {
-webkit-animation: bounce .6s linear .2s infinite alternate;
animation: bounce .6s linear .2s infinite alternate;
}
.loadReplysAnimate span:last-child {
-webkit-animation: bounce .6s linear .4s infinite alternate;
animation: bounce .6s linear .4s infinite alternate;
}
@-webkit-keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 7px, 0);
transform: translate3d(0, 7px, 0);
}
50% {
-webkit-transform: translate3d(0, 14px, 0);
transform: translate3d(0, 14px, 0);
}
}
@keyframes bounce {
0%, 100% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
25%, 75% {
-webkit-transform: translate3d(0, 7px, 0);
transform: translate3d(0, 7px, 0);
}
50% {
-webkit-transform: translate3d(0, 14px, 0);
transform: translate3d(0, 14px, 0);
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var loadRplysTimer;
var loadReplysIsLoading = false;
var loadReplaysPage = 2;
var loadReplaysTotalPage = 10; // this value might be gotten from ajax
var t = 0; // use to record scrolltop, 0 is the initial value
var targets = document.getElementsByClassName('postList'); //
function loadReplysHandler() {
if( loadReplysIsLoading ) return; // while true, wait for finishing
if( loadReplaysPage > loadReplaysTotalPage ) {
window.removeEventListener('scroll', loadReplysHandler); // destroy waterfall
}
var w_scrolltop = window.pageYOffset;
var w_height = window.innerHeight;
var footerElem = targets[targets.length-1];
var footerElemTop = footerElem.offsetTop;
if( w_scrolltop + w_height - 100 > footerElemTop && w_scrolltop - t >= 5 && loadReplaysPage <= loadReplaysTotalPage) {
loadReplysIsLoading = true;
loadReplysAjax();
}
setTimeout(function() {
t = w_scrolltop;
}, 0);
}
function loadReplysAjax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if( xhr.readyState === 1 ) { // ajax start
var d = document.createElement('div');
d.id = 'postListLoading';
d.className = 'postList';
d.innerHTML = '<div class="loadReplysAnimate"><div class="post-border"></div><span></span><span></span><span></span></div>';
targets[targets.length-1].parentNode.insertBefore(d, targets[targets.length-1].nextElementSibling);
}
if( xhr.readyState === 4 ) { // ajax complete
if( xhr.status === 200 ) { // ajax success
var res = JSON.parse(xhr.responseText);
if( res.data ) {
loadReplysAppend(res.data);
}
}else { // ajax fail
console.log('Error: ' + xhr.status);
}
var loading = document.getElementById('postListLoading');
if( loading ) {
loading.remove();
}
loadReplysIsLoading = false;
}
};
xhr.open('GET', '/api.php?mod=viewthread&do=waterfall&tid=1&page=' + loadReplaysPage.toString() + '&ordertype=1');
xhr.send(null);
}
function loadReplysAppend(res) {
if( res ) {
var frag = document.createDocumentFragment();
var temp = document.createElement('temp');
var child;
temp.innerHTML = res;
while (child = temp.firstElementChild) {
frag.appendChild(child);
}
targets[targets.length-1].parentNode.insertBefore(frag, targets[targets.length-1].nextElementSibling);
loadReplaysPage++;
}
}
window.addEventListener('scroll', loadReplysHandler);
</script></body>
</html>
Raw
waterFallExample.js
var loadRplysTimer;
var loadReplysIsLoading = false;
var loadReplaysPage = 2;
var loadReplaysTotalPage = 10; // this value might be gotten from ajax
var t = 0; // use to record scrolltop, 0 is the initial value
var targets = document.getElementsByClassName('postList'); //
function loadReplysHandler() {
if( loadReplysIsLoading ) return; // while true, wait for finishing
if( loadReplaysPage > loadReplaysTotalPage ) {
window.removeEventListener('scroll', loadReplysHandler); // destroy waterfall
}
var w_scrolltop = window.pageYOffset;
var w_height = window.innerHeight;
var footerElem = targets[targets.length-1];
var footerElemTop = footerElem.offsetTop;
if( w_scrolltop + w_height - 100 > footerElemTop && w_scrolltop - t >= 5 && loadReplaysPage <= loadReplaysTotalPage) {
loadReplysIsLoading = true;
loadReplysAjax();
}
setTimeout(function() {
t = w_scrolltop;
}, 0);
}
function loadReplysAjax() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if( xhr.readyState === 1 ) { // ajax start
var d = document.createElement('div');
d.id = 'postListLoading';
d.className = 'postList';
d.innerHTML = '<div class="loadReplysAnimate"><div class="post-border"></div><span></span><span></span><span></span></div>';
targets[targets.length-1].parentNode.insertBefore(d, targets[targets.length-1].nextElementSibling);
}
if( xhr.readyState === 4 ) { // ajax complete
if( xhr.status === 200 ) { // ajax success
var res = JSON.parse(xhr.responseText);
if( res.data ) {
loadReplysAppend(res.data);
}
}else { // ajax fail
console.log('Error: ' + xhr.status);
}
var loading = document.getElementById('postListLoading');
if( loading ) {
loading.remove();
}
loadReplysIsLoading = false;
}
};
xhr.open('GET', '/api.php?mod=viewthread&do=waterfall&tid=1&page=' + loadReplaysPage.toString() + '&ordertype=1');
xhr.send(null);
}
function loadReplysAppend(res) {
if( res ) {
var frag = document.createDocumentFragment();
var temp = document.createElement('temp');
var child;
temp.innerHTML = res;
while (child = temp.firstElementChild) {
frag.appendChild(child);
}
targets[targets.length-1].parentNode.insertBefore(frag, targets[targets.length-1].nextElementSibling);
loadReplaysPage++;
}
}
window.addEventListener('scroll', loadReplysHandler);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment