tybys,
нажать
Ещё ? внизу
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<style type="text/css">
#resultText{
display: flex;
flex-wrap: wrap;
}
#resultText > li{
display: inline-block;
word-wrap: break-word;
width: 340px;
list-style-type: none;
background: #D2B48C none repeat scroll 0 0;
border: 1px solid #ffcc00;
border-radius: 16px;
box-sizing: border-box;
overflow: hidden;
vertical-align: middle;
padding: 20px;
margin: 5px;
}
#more{
color: #FFFFFF;
font-size: 48px;
font-weight: normal;
display: block;
line-height: 48px;
margin: 0 auto;
width: 100%;
}
#resultText > li.end{
text-align: center;
background: black;
color: white;
}
.al-pic {
border-radius: 15px;
display: block;
height: 180px;
margin: 0 0 9px;
width: 300px;
}
a.al-title {
color: #FFFFFF;
font-size: 20px;
font-weight: normal;
line-height: 28px;
margin: 0 0 6px;
}
.al-title {
font-size: 22px;
font-weight: normal;
line-height: 28px;
margin: 0 0 6px;
}
.cssload-container {
position: relative;
z-index: 4;
margin: 0 auto;
display: none;
width: 166px;
height: 78px;
list-style: none;
border: 2px solid rgba(0,0,0,0.4);
border-radius: 39px;
}
.cssload-loader{
position: absolute;
z-index: 3;
margin: 0 auto;
left: -40px;
right: 0;
top: 50%;
margin-top: -29px;
width: 97px;
height: 58px;
list-style: none;
}
ul.cssload-loader li{
background-color: rgb(255, 255, 255);
width: 10px;
height: 10px;
float: right;
margin-right: 5px !important;
box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-o-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-ms-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 19px 10px rgba(0,0,0,0.2);
}
.cssload-loader li:first-child{
animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-o-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-ms-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-webkit-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
-moz-animation: cssload-loadbars 1.15s cubic-bezier(0.645,0.045,0.355,1) infinite 0s;
}
.cssload-loader li:nth-child(2){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.23s;
}
.cssload-loader li:nth-child(3){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.46s;
}
.cssload-loader li:nth-child(4){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.69s;
}
.cssload-loader li:nth-child(5){
animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -0.92s;
}
.cssload-loader li:nth-child(6){
animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-o-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-ms-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-webkit-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
-moz-animation: cssload-loadbars 1.15s ease-in-out infinite -1.15s;
}
@keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-o-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-ms-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-webkit-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
@-moz-keyframes cssload-loadbars {
0%{
height: 10px;
margin-top: 24px;
}
50%{
height:49px;
margin-top: 0px;
}
100%{
height: 10px;
margin-top: 24px;
}
}
</style>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(window).load(function () {
$.fn.scrollTo = function (speed, easing, callback) {
$('body, html').animate({
scrollTop: this.offset().top
}, speed, easing, callback);
return this;
};
function rand(min, max, integer) {
var r = Math.random() * (max - min) + min;
return integer ? r|0 : r;
};
var url = "https://api.vkontakte.ru/method/wall.get?domain=adme";
var offset = 0;
var postsCount = 0;
var old = {};
function newPost() {
$.ajax({
url: url,
dataType: "jsonp",
data: {
count: 10,
offset: rand(1, postsCount, true)
},
success: function(data) {
var posts = data.response;
postsCount = posts.shift();
offset += 10;
parse(posts);
}
});
}
function parse(data) {
var liEnd = $(".end"), current = liEnd.prev(), n = 0;
$.each(data, function(indx, el) {
var id = el.id,
attach = el.attachments, img, a;
if (!old[id] && attach && attach.length > 1) {
old[id] = true;
var li = $("<li/>");
$.each(attach, function(indx, el) {
var photo = el.photo;
if (photo) {
var src = photo.src_big;
if (src && !img) {
img = $("<img/>", {
src: src,
width: "300",
height: "180",
"class": "al-pic"
});
img.appendTo(li)
}
}
var link = el.link;
if (link) {
a = $("<a/>", {
"class": "al-title",
href: link.url,
text: link.title
});
a.appendTo(li);
var h = $("<h3/>", {
"class": "al-title",
html: link.description
});
h.appendTo(li)
}
});
img && a && li.insertBefore(liEnd) && n++
}
});
!n && newPost();
n && $('.cssload-container').hide() && $('#more').show()
current.length && current.next().scrollTo(1E3)
};
newPost();
$('#more').click(function (event) {
event.preventDefault();
$('#more').hide();
$('.cssload-container').show()
newPost();
});
}); </script>
</head>
<body>
<table id="TableA"></table>
<div id="DivA"></div>
<ul id="resultText"><li class="end"><a href="#" id="more" class="al-title">Ещё ?</a><h3 class="al-title">Мне нужно больше интересных статей</h3>
<div class="cssload-container">
<ul class="cssload-loader">
<li></li><li></li><li></li><li></li><li></li><li></li>
</ul>
</div>
</li></ul>
</body>
</html>