jquery implements waterfall flow effect sharing_jquery

Use jquery to achieve the waterfall flow effect. Please use it as a reference. You can see the effect after running. The JQ introduction in the code must be replaced with your own

Copy code The code is as follows:

< body>

$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
$size = 20;
try
{
$pdo = new PDO('mysql:host=localhost;dbname=wechatbook', 'root', 'root');
$offset = ($page - 1) * $size;
$sql = "SELECT title FROM wcb_rss_news limit $offset,$size";
$stmt = $pdo->query($sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$list = $stmt->fetchAll();
if (!empty($list))
{
foreach ($list as $row)
{
?>

}
}
else
{
echo '';
}
}
catch (PDOException $e)
{
}
?>

Next page

<script><br> $(function() { <br> var $container = $("#container");<br> $container.imagesLoaded(function() {<br> $container.masonry({<br> itemSelector: '.box',<br> isAnimated : true,<br> columnWidth:200,<br> gutterWidth:200,<br> // isFitWidth:true,//adaptive width<br> isResizableL:true//whether it can be resized<br> });<br> });<br> $container.infinitescroll({<br> navSelector: '#next-link',<br> nextSelector: '#next-link a',<br> itemSelector: '.box',<br> animate: true,<br> loading: {<br> msgText: "Loading...",<br> finishedMsg: 'No new data...',<br> img: 'http:// www.jb51.ne/img/loading.gif',<br> selector: '.loading'<br> },<br> localMode: true<br> }, function(newElements) {<br> console.dir( newElements)<br> var $newEle = $(newElements);<br> $newEle.imagesLoaded(function() {<br> $container.masonry('appended', $newEle, true);<br> }); <br> });<br> });<br></script>