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 = $pdo->query($sql);
 $stmt- setFetchMode(PDO::FETCH_ASSOC);
  $list = $stmt->fetchAll();
  if (!empty($list))
  {  🎜>   {
    ?>
    

= $row['title'] ?>

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

下一頁

<script><BR> $(function() {<BR>  var $container = $("#container");<BR>  $container.imagesLoaded(function() {<BR>   $container.masonry({<BR>    itemSelector: '.box',<BR>    isAnimated:  //  isFitWidth:true,//自適應寬度<BR>    isResizableL:true// 是否可調整大小<BR>   });<BR>  });<BR>  $container.infinitescroll({<; >   nextSelector: '#next-link a',<BR>   itemSelector: '.box',<BR>   animate: true,<BR>   loading: {<ms5> 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); >    $container.masonry('appended', $newEle, true);<BR>   });<BR>  });<BR> });<BR></script>