這篇文章主要介紹了jquery實現瀑布流效果分享,需要的朋友可以參考下
使用jquery實現瀑布流效果，大家參考使用吧，運行後可以看到效果，代碼中的JQ引入一定要換成自己的才好 代碼如下: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>AJAX</title> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" /> <script src="js/jquery-1.8.1.min.js"></script> <script src="js/jquery.masonry.min.js"></script> <script src="js/jquery.infinitescroll.min.js"></script> <style> #container { width: 90%; margin: 80px auto; } .box { box-shadow: 0 0 4px #999; margin-top: 40px; padding: 40px; font-family: "Century Gothic", "Microsoft YaHei", Arial, monospace; } .loading { text-align: center; } </style> </head> <body> <div id="container"> <?php $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) { ?> <div class="box"><?= $row['title'] ?></div> <?php } } else { echo ''; } } catch (PDOException $e) { } ?> </div> <div class="loading"> </div> <div id="next-link"><a href="data.php?page=1">下一頁</a></div> <script> $(function() { var $container = $("#container"); $container.imagesLoaded(function() { $container.masonry({ itemSelector: '.box', isAnimated: true, columnWidth:200, gutterWidth:200, // isFitWidth:true,//自適應寬度 isResizableL:true// 是否可調整大小 }); }); $container.infinitescroll({ navSelector: '#next-link', nextSelector: '#next-link a', itemSelector: '.box', animate: true, loading: { msgText: "加載中...", finishedMsg: '沒有新數據了...', img: 'http://www.jb51.ne/img/loading.gif', selector: '.loading' }, localMode: true }, function(newElements) { console.dir(newElements) var $newEle = $(newElements); $newEle.imagesLoaded(function() { $container.masonry('appended', $newEle, true); }); }); }); </script> </body> </html>