欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery开发中瀑布流效果实现方法

程序员文章站 2022-06-20 17:59:56
使用jquery实现瀑布流效果,大家参考使用吧,运行后可以看到效果,代码中的jq引入一定要换成自己的才好 . 代码如下: &l...

使用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>
<p 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)
   {
    ?>
    <p class="box"><?= $row['title'] ?></p>
   <?php
   }
  }
  else
  {
   echo '';
  }
 }
 catch (pdoexception $e)
 {
 }
 ?>
</p>
<p class="loading">
</p>
<p id="next-link"><a href="data.php?page=1">下一页</a></p>
<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: 'https://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>