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 仿腾讯发表微博的效果代码
Dec 25 Javascript
JQuery实现网页右侧随动广告特效
Jan 17 Javascript
javascript实现可键盘控制的抽奖系统
Mar 10 Javascript
JQuery解析XML的方法小结
Apr 02 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
浅谈Node 异步IO和事件循环
May 05 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 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
用来解析.htpasswd文件的PHP类
2012/09/05 PHP
PHP FATAL ERROR: CALL TO UNDEFINED FUNCTION BCMUL()解决办法
2014/05/04 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
CI框架实现创建自定义类库的方法
2018/12/25 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
PHP解密支付宝小程序的加密数据、手机号的示例代码
2021/02/26 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
javascript类继承机制的原理分析
2009/09/12 Javascript
javascript实现数字+字母验证码的简单实例
2014/02/10 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
JavaScript获取tr td 的三种方式全面总结(推荐)
2017/08/15 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
2017/12/27 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
JavaScript实现JSON合并操作示例【递归深度合并】
2018/09/07 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
Node.JS如何实现JWT原理
2020/09/18 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python开发常用的一些开源Package分享
2015/02/14 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python实现隐马尔科夫模型HMM
2018/03/25 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
Django Celery异步任务队列的实现
2019/07/24 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
使用python自动追踪你的快递(物流推送邮箱)
2020/03/17 Python
JAVA招聘远程笔试题
2015/07/23 面试题
2014年党员公开承诺书范文
2014/03/28 职场文书
公民授权委托书范本
2014/09/17 职场文书
个人贷款收入证明
2014/10/26 职场文书
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
Win10本地连接不见了怎么恢复? win10系统电脑本地连接不见了解决方法
2023/01/09 数码科技