jquery实现瀑布流效果分享


Posted in Javascript onMarch 26, 2014

使用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.3water.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>
Javascript 相关文章推荐
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
jQuery getJSON()+.ashx 实现分页(改进版)
Mar 28 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
jQuery中 bind的用法简单介绍
Feb 13 Javascript
JS实现汉字与Unicode码相互转换的方法详解
Apr 28 Javascript
详解node.js 下载图片的 2 种方式
Mar 02 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
jquery实现效果比较好的table选中行颜色
Mar 25 #Javascript
Jquery对数组的操作技巧整理
Mar 25 #Javascript
常用的几段javascript代码分享
Mar 25 #Javascript
捕获和分析JavaScript Error的方法
Mar 25 #Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 #Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 #Javascript
jquery动态更换设置背景图的方法
Mar 25 #Javascript
You might like
漂亮但不安全的CTB
2006/10/09 PHP
php 操作excel文件的方法小结
2009/12/31 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
tp5框架内使用tp3.2分页的方法分析
2019/05/05 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
Javascript 错误处理的几种方法
2009/06/13 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
原生js做的手风琴效果的导航菜单
2013/11/08 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
jquery渐隐渐显的图片幻灯闪烁切换实现方法
2015/02/26 Javascript
简单介绍JavaScript中字符串创建的基本方法
2015/07/07 Javascript
在for循环中length值是否需要缓存
2015/07/27 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
jQuery.Validate表单验证插件的使用示例详解
2017/01/04 Javascript
vue项目中使用ueditor的实例讲解
2018/03/05 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
python获取本机mac地址和ip地址的方法
2015/04/29 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
Python测试人员需要掌握的知识
2018/02/08 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
python模拟菜刀反弹shell绕过限制【推荐】
2019/06/25 Python
如何理解Python中的变量
2020/06/01 Python
CSS3实现类似翻书效果的过渡动画的示例代码
2019/09/06 HTML / CSS
街头时尚在线:JESSICABUURMAN
2019/06/16 全球购物
如何强制垃圾回收
2015/10/06 面试题
搞笑获奖感言
2014/01/30 职场文书
小学教师2014年度工作总结
2014/12/03 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
高中体育课教学反思
2016/02/16 职场文书
Pytorch DataLoader shuffle验证方式
2021/06/02 Python
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server