萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery實現瀑布流效果分享

jquery實現瀑布流效果分享

 這篇文章主要介紹了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>
copyright © 萬盛學電腦網 all rights reserved