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

      }
  }
  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>