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左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue2.0 datepicker使用方法
Feb 04 Javascript
js replace替换字符串同时替换多个方法
Nov 27 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
详解Vue中的基本语法和常用指令
Jul 23 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 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电台频率大全 - 19 广东省
2020/03/11 无线电
php mysql数据库操作分页类
2008/06/04 PHP
php中file_get_contents与curl性能比较分析
2014/11/08 PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
2018/04/04 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
鼠标滑上去后图片放大浮出效果的js代码
2011/05/28 Javascript
ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList
2012/02/03 Javascript
jquery图片放大镜功能的实例代码
2013/03/26 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
解决bootstrap下拉菜单点击立即隐藏bug的方法
2017/06/13 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
nodejs简单实现TCP服务器端和客户端的聊天功能示例
2018/01/04 NodeJs
使用vue实现grid-layout功能实例代码
2018/01/05 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
python之wxPython菜单使用详解
2014/09/28 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python字符类型的一些方法小结
2016/05/16 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
Python 调用Java实例详解
2017/06/02 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
毕业生怎样写好自荐信
2013/11/11 职场文书
如何写早恋检讨书
2014/09/10 职场文书
违纪检讨书范文
2015/01/27 职场文书
毕业论文致谢信
2015/05/14 职场文书
恰同学少年观后感
2015/06/08 职场文书
2019年国庆祝福语(70句)
2019/09/19 职场文书
python 经纬度求两点距离、三点面积操作
2021/06/03 Python
JavaScript数组reduce()方法的语法与实例解析
2021/07/07 Javascript