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代码的信息监听示例
Apr 02 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
Sep 06 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
Oct 21 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
angularjs数组判断是否含有某个元素的实例
Feb 27 Javascript
js+canvas实现纸牌游戏
Mar 16 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 Javascript
什么是SOLID
Mar 24 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
全国FM电台频率大全 - 30 宁夏回族自治区
2020/03/11 无线电
phpQuery占用内存过多的处理方法
2013/11/13 PHP
YII实现分页的方法
2014/07/09 PHP
php使用array_search函数实现数组查找的方法
2015/06/12 PHP
PHP 中提示undefined index如何解决(多种方法)
2016/03/16 PHP
Laravel5权限管理方法详解
2016/07/26 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
javascript indexOf函数使用说明
2008/07/03 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
jQuery监听文件上传实现进度条效果的方法
2016/10/16 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
js实现交通灯效果
2017/01/13 Javascript
移动端手指放大缩小插件与js源码
2017/05/22 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
浅谈PyTorch的可重复性问题(如何使实验结果可复现)
2020/02/20 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
IdealFit官方网站:女性蛋白质、补充剂和运动服装
2019/03/24 全球购物
如何撰写岗位职责
2014/02/01 职场文书
主管会计岗位责任制
2014/02/10 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
授权委托书格式
2014/07/31 职场文书
2014年维修工作总结
2014/11/22 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
民事调解书范文
2015/05/20 职场文书
小学生教师节广播稿
2015/08/19 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang