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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
js显示文本框提示文字的方法
May 07 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
react+redux的升级版todoList的实现
Dec 18 Javascript
JS动画定时器知识总结
Mar 23 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
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
php常用数学函数汇总
2014/11/21 PHP
php选择排序法实现数组排序实例分析
2015/02/16 PHP
php ajax异步读取rss文档数据
2016/03/29 PHP
js拦截alert对话框另类应用
2013/01/16 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
批量实现面向对象的实例代码
2013/07/01 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
原生JS简单实现ajax的方法示例
2016/11/29 Javascript
JavaScrpt的面向对象全面解析
2017/05/09 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
JavaScript实现世界各地时间显示
2020/09/07 Javascript
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
python读取和保存图片5种方法对比
2018/09/12 Python
pycharm打开命令行或Terminal的方法
2019/01/16 Python
Django rest framework jwt的使用方法详解
2019/08/08 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
python和php哪个容易学
2020/06/19 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
Manduka官网:瑜伽垫、瑜伽毛巾和服装
2018/07/02 全球购物
KELLER SPORTS荷兰:在线订购最好的运动产品
2020/10/13 全球购物
What's the difference between deep copy and shallow copy? (深拷贝与浅拷贝有什么区别)
2015/11/10 面试题
软件测试工程师面试问题精选
2016/10/28 面试题
通信生自我鉴定
2014/01/18 职场文书
护理专科自荐书范文
2014/02/18 职场文书
教师对学生的评语
2014/04/28 职场文书
争当四好少年演讲稿
2014/09/13 职场文书
2014县委书记党的群众路线教育实践活动对照检查材料思想汇报
2014/09/22 职场文书
优秀员工事迹材料
2014/12/20 职场文书
二年级学生期末评语
2014/12/26 职场文书
如何理解PHP核心特性命名空间
2021/05/28 PHP
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python