基于Jquery的瀑布流
AJAX
$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) { } ?>
<script></li>
<li> $(function() {</li>
<li> var $container = $("#container");</li>
<li> $container.imagesLoaded(function() {</li>
<li> $container.masonry({</li>
<li> itemSelector: '.box',</li>
<li> isAnimated: true,</li>
<li> columnWidth:200,</li>
<li> gutterWidth:200,</li>
<li> // isFitWidth:true,//自适应宽度</li>
<li> isResizableL:true// 是否可调整大小</li>
<li> });</li>
<li> });</li>
<li> $container.infinitescroll({</li>
<li> navSelector: '#next-link',</li>
<li> nextSelector: '#next-link a',</li>
<li> itemSelector: '.box',</li>
<li> animate: true,</li>
<li> loading: {</li>
<li> msgText: "加载中...",</li>
<li> finishedMsg: '没有新数据了...',</li>
<li> img: 'http://xialei.test.com/img/loading.gif',</li>
<li> selector: '.loading'</li>
<li> },</li>
<li> localMode: true</li>
<li> }, function(newElements) {</li>
<li> console.dir(newElements)</li>
<li> var $newEle = $(newElements);</li>
<li> $newEle.imagesLoaded(function() {</li>
<li> $container.masonry('appended', $newEle, true);</li>
<li> });</li>
<li> });</li>
<li> });</li>
<li></script>
复制代码
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
