Masonry Infinite Scroll With Mysql
<?php
ob_start();
$aHost = 'HOSTNAME';
$aUser = 'DBUSER';
$aPass = 'DBPASS';
$aDb = 'DBNAME';
$aCon = mysqli_connect($aHost,$aUser,$aPass);
mysqli_select_db($aCon,$aDb);
$limit = 15;
$page = isset($_REQUEST['page']) ? $_REQUEST['page'] : 1;
$start = ($page - 1) * $limit;
$aLimit = "LIMIT {$start},{$limit}";
$aSql = "SELECT * FROM wp_posts WHERE 1 {$aLimit}";
$aResult = mysqli_query($aCon,$aSql);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Infinite Scroll With Mysql</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="gridConainer" class="">
<?php
while($aRow = mysqli_fetch_assoc($aResult))
{
?>
<div class="box">
<h1><?php echo $aRow['post_title']; ?></h1>
<h2><?php echo date("d/m/Y",strtotime($aRow['post_date'])); ?></h2>
<p><?php echo $aRow['post_name']; ?></p>
</div>
<?php
}
?>
</div>
<nav id="page-nav">
<a href="index.php?page=<?php echo $page; ?>"></a>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.masonry.min.js"></script>
<script src="js/jquery.infinitescroll.min.js"></script>
<script>
$(function(){
var $container = $('#gridConainer');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '.box',
});
});
$container.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '.box',
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/6RMhx.gif'
}
},
function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true );
});
});
});
</script>
</body>
</html>
Download source code Here