jquery实现瀑布流效果分享
使用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.jb51.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>
相关文章
这篇文章主要介绍了jQuery实现的简单对话框拖动功能,涉及jQuery事件响应、数值运算及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2018-06-06
jQuery配合coin-slider插件制作幻灯片效果的流程解析
coin-slider是GitHub上的一个人气JavaScript开源插件,用它来实现幻灯片效果只需要动手写很少的代码,下面我们就来看一下jQuery配合coin-slider插件制作幻灯片效果的流程解析.2016-05-05
今天针对这个JQuery里面的toggle聊几句，文章中涉及到了一些问题望牛牛们能帮忙解惑一下。2009-11-11
在一些网站上，我们经常见到返回顶部的效果，本文给大家介绍基于jquery如何实现返回顶部效果，非常不错，感兴趣的朋友可以参考下2016-07-07
这篇文章主要介绍了jQuery数据缓存用法,较为详细的分析了jQuery数据缓存的功能、定义与相关的使用技巧,需要的朋友可以参考下2015-02-02
点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面，效果相当不错，感兴趣的前端工程师们可以参考下2013-04-04
Jquery设置attr的disabled属性控制某行显示或者隐藏
这篇文章主要与大家分享Jquery设置attr的disabled属性控制某行显示或者隐藏的具体实现，喜欢的朋友可以参考下2014-09-09
jQuery改变form表单的action,并进行提交的实现代码
下面小编就为大家带来一篇jQuery改变form表单的action,并进行提交的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
jQuery Easyui datagrid连续发送两次请求问题
用上述方式动态加载datagrid的数据时，通过net监听，发现调用了两遍XX方法，目前的解决方案是，将url放到datagrid初始化的时候执行2016-12-12
这篇文章主要介绍了jQuery实现侧边栏隐藏与显示的方法,结合实例形式较为详细的分析了jQuery基于事件响应与页面元素属性动态操作实现元素显示与隐藏功能的相关操作技巧,需要的朋友可以参考下2018-12-12
最新评论