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 相关文章推荐
Firefox outerHTML实现代码
Jun 04 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
js获取多个tagname的节点数组
Sep 22 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
什么是Node.js?Node.js详细介绍
Jun 01 Javascript
node.js中的console.error方法使用说明
Dec 10 Javascript
js中利用tagname和id获取元素的方法
Jan 03 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
vue学习笔记之指令v-text &amp;&amp; v-html &amp;&amp; v-bind详解
May 12 Javascript
jQuery创建及操作xml格式数据示例
May 26 jQuery
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
jquery无缝图片轮播组件封装
Nov 25 jQuery
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
Laravel框架数据库CURD操作、连贯操作总结
2014/09/03 PHP
PHP实现HTML生成PDF文件的方法
2014/11/07 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
PHP常见错误提示含义解释(实用!值得收藏)
2016/04/25 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
jQuery的图片滑块焦点图插件整理推荐
2014/12/07 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
2015/03/27 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
学习jQuey中的return false
2015/12/18 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
使用 Vue cli 3.0 构建自定义组件库的方法
2019/04/30 Javascript
[01:47]2018年度DOTA2最佳教练-完美盛典
2018/12/16 DOTA
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
win10子系统python开发环境准备及kenlm和nltk的使用教程
2019/10/14 Python
python 实现屏幕录制示例
2019/12/23 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
css3.0 图形构成实例练习二
2013/03/19 HTML / CSS
C语言笔试题
2014/09/04 面试题
小学生读书活动总结
2014/06/30 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
老乡聚会通知
2015/04/23 职场文书
Pytorch distributed 多卡并行载入模型操作
2021/06/05 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
Java多线程并发FutureTask使用详解
2022/06/28 Java/Android