jquery实现瀑布流效果分享_jquery

使用jquery实现瀑布流效果，大家参考使用吧，运行后可以看到效果，代码中的JQ引入一定要换成自己的才好

复制代码 代码如下:

 
 
 
 
 
 
 

  $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)
   {
    ?>
    

= $row['title'] ?>

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

下一页

<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,//自适应宽度<BR> isResizableL:true// 是否可调整大小<BR> });<BR> });<BR> $container.infinitescroll({<BR> navSelector: '#next-link',<BR> nextSelector: '#next-link a',<BR> itemSelector: '.box',<BR> animate: true,<BR> loading: {<BR> msgText: "加载中...",<BR> finishedMsg: '没有新数据了...',<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>