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函数调用的方式
May 06 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 Javascript
javascript实现自动填写表单实例简析
Dec 02 Javascript
几句话带你理解JS中的this、闭包、原型链
Sep 26 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
Javascript实现找不同色块的游戏
Jul 17 Javascript
vue 实现通过手机发送短信验证码注册功能
Apr 19 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 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
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
2007/04/01 Javascript
jQuery TextBox自动完成条
2009/07/22 Javascript
关于js类的定义
2011/06/28 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
Node.js中创建和管理外部进程详解
2014/08/16 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
浅谈JavaScript中的对象及Promise对象的实现
2015/11/15 Javascript
SpringMVC返回json数据的三种方式
2015/12/10 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
js 数据存储和DOM编程
2017/02/09 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
JS实现的简单分页功能示例
2018/08/23 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
jdk1.8+vue elementui实现多级菜单功能
2020/09/24 Javascript
[43:36]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python正则分组的应用
2013/11/10 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python聊天室实例程序分享
2016/01/05 Python
详解Django之admin组件的使用和源码剖析
2018/05/04 Python
python得到单词模式的示例
2018/10/15 Python
用Python编写一个高效的端口扫描器的方法
2018/12/20 Python
Django框架模板介绍
2019/01/15 Python
Python任意字符串转16, 32, 64进制的方法
2019/06/12 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Django中F函数的使用示例代码详解
2020/07/06 Python
详解python UDP 编程
2020/08/24 Python
什么是虚拟内存?虚拟内存有什么优势?
2016/02/09 面试题
预备党员思想汇报范文
2014/01/11 职场文书
幼儿园教师请假制度
2014/01/16 职场文书
应急处置方案
2014/06/16 职场文书
党员自我剖析材料范文
2014/10/06 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
药店营业员岗位职责
2015/04/14 职场文书