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 相关文章推荐
jQuery让控件左右移动的三种实现方法
Sep 08 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
AngularJs学习第八篇 过滤器filter创建
Jun 08 Javascript
jQuery插件HighCharts实现的2D回归直线散点效果示例【附demo源码下载】
Mar 09 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
Javascript实现单选框效果
Dec 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
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP设计模式之结构模式的深入解析
2013/06/13 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP实现的统计数据功能详解
2016/12/06 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
使用jQuery.fn自定义jQuery翻页插件
2013/01/20 Javascript
左侧是表头的JS表格控件(自写,网上没有的)
2013/06/04 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
jquery右下角弹出提示框示例代码
2013/10/08 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
vue实现配置全局访问路径头(axios)
2019/11/01 Javascript
[03:02]2014DOTA2西雅图邀请赛 让队员自己告诉你DK NAVI备战情况
2014/07/08 DOTA
9种python web 程序的部署方式小结
2014/06/30 Python
python学习 流程控制语句详解
2016/06/01 Python
python使用xslt提取网页数据的方法
2018/02/23 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
css和css3弹性盒模型实现元素宽度(高度)自适应
2019/05/15 HTML / CSS
几道PHP面试题
2013/04/14 面试题
汽车工程专业应届生求职信
2013/10/19 职场文书
公司离职证明范本
2014/01/13 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
税务会计岗位职责
2015/04/02 职场文书
交通事故调解协议书
2015/05/20 职场文书
校园广播稿范文
2015/08/19 职场文书
2016年中秋节寄语大全
2015/12/07 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
Python利用folium实现地图可视化
2021/05/23 Python
Python基础之函数嵌套知识总结
2021/05/23 Python