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 相关文章推荐
深入理解JavaScript系列(4) 立即调用的函数表达式
Jan 15 Javascript
jquery实现的鼠标拖动排序Li或Table
May 04 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
node.js中的定时器nextTick()和setImmediate()区别分析
Nov 26 Javascript
JS前端加密算法示例
Dec 22 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
JavaScript实现类似淘宝的购物车效果
Mar 16 Javascript
AngulaJS路由 ui-router 传参实例
Apr 28 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
vue回到顶部监听滚动事件详解
Aug 02 Javascript
Vue axios 将传递的json数据转为form data的例子
Oct 29 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
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
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP异常处理浅析
2015/05/12 PHP
PHP对象、模式与实践之高级特性分析
2016/12/08 PHP
php自定义函数br2nl实现将html中br换行符转换为文本输入中换行符的方法【与函数nl2br功能相反】
2017/02/17 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
JS IE和FF兼容性问题汇总
2009/02/09 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
vue在响应头response中获取自定义headers操作
2020/07/24 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
python去除文件中重复的行实例
2018/06/29 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python os模块常用方法和属性总结
2020/02/20 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
时尚的CSS3进度条效果
2012/02/22 HTML / CSS
英国可持续奢侈品包包品牌:Elvis & Kresse
2018/08/05 全球购物
人力资源部门的主要职能
2014/02/22 职场文书
科研课题实施方案
2014/03/18 职场文书
贷款委托书
2014/08/01 职场文书
大专毕业生自我鉴定范文(2篇)
2014/09/27 职场文书
法人代表资格证明书
2015/06/18 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
《失物招领》教学反思
2016/02/20 职场文书
四年级语文教学反思
2016/03/03 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python