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封装的不错的选项卡效果代码
Feb 15 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
JS数组去重(4种方法)
Mar 27 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
Apr 12 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
Jul 10 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
Vue数据绑定简析小结
May 07 Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
js实现简易ATM功能
Oct 27 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
php中利用explode函数分割字符串到数组
2014/02/08 PHP
php+Ajax处理xml与json格式数据的方法示例
2019/03/04 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
tangram框架响应式加载图片方法
2013/11/21 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
JS实现的用来对比两个用指定分隔符分割的字符串是否相同
2014/09/19 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案
2016/12/14 Javascript
自动适应iframe右边的高度
2016/12/22 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
Vue 2.0 中依赖注入 provide/inject组合实战
2019/06/20 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
整理Python 常用string函数(收藏)
2016/05/30 Python
Tornado Web Server框架编写简易Python服务器
2018/07/28 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
tensorflow的计算图总结
2020/01/12 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
python tqdm实现进度条的示例代码
2020/11/10 Python
python中xlrd模块的使用详解
2021/02/01 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
德国珠宝和手表在线商店:VALMANO
2019/03/24 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
Linux上比较文件的命令都有哪些
2013/09/28 面试题
行政助理的职责
2013/11/14 职场文书
大学校园生活自我鉴定
2014/01/13 职场文书
聚美优品励志广告词
2014/03/14 职场文书
抗洪抢险事迹材料
2014/05/06 职场文书
大学三好学生主要事迹范文
2015/11/03 职场文书
K8s部署发布Golang应用程序的实现方法
2021/07/16 Golang
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
SQL Server中锁的用法
2022/05/20 SQL Server