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

Share on Google+Share on FacebookTweet about this on TwitterEmail this to someone