jquery實現(xiàn)瀑布流效果分享
使用jquery實現(xiàn)瀑布流效果，大家參考使用吧，運行后可以看到效果，代碼中的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: '沒有新數(shù)據(jù)了...',
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實現(xiàn)的簡單對話框拖動功能,涉及jQuery事件響應、數(shù)值運算及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-06-06
jQuery配合coin-slider插件制作幻燈片效果的流程解析
coin-slider是GitHub上的一個人氣JavaScript開源插件,用它來實現(xiàn)幻燈片效果只需要動手寫很少的代碼,下面我們就來看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.2016-05-05
今天針對這個JQuery里面的toggle聊幾句，文章中涉及到了一些問題望牛牛們能幫忙解惑一下。2009-11-11
在一些網(wǎng)站上，我們經(jīng)常見到返回頂部的效果，本文給大家介紹基于jquery如何實現(xiàn)返回頂部效果，非常不錯，感興趣的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery數(shù)據(jù)緩存用法,較為詳細的分析了jQuery數(shù)據(jù)緩存的功能、定義與相關的使用技巧,需要的朋友可以參考下2015-02-02
點擊左右按鈕圖片橫向滾動jquery，一次滾動四個，圖片滾動完成，自動回到第一個版面，效果相當不錯，感興趣的前端工程師們可以參考下2013-04-04
Jquery設置attr的disabled屬性控制某行顯示或者隱藏
這篇文章主要與大家分享Jquery設置attr的disabled屬性控制某行顯示或者隱藏的具體實現(xiàn)，喜歡的朋友可以參考下2014-09-09
jQuery改變form表單的action,并進行提交的實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query改變form表單的action,并進行提交的實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
jQuery Easyui datagrid連續(xù)發(fā)送兩次請求問題
用上述方式動態(tài)加載datagrid的數(shù)據(jù)時，通過net監(jiān)聽，發(fā)現(xiàn)調用了兩遍XX方法，目前的解決方案是，將url放到datagrid初始化的時候執(zhí)行2016-12-12
這篇文章主要介紹了jQuery實現(xiàn)側邊欄隱藏與顯示的方法,結合實例形式較為詳細的分析了jQuery基于事件響應與頁面元素屬性動態(tài)操作實現(xiàn)元素顯示與隱藏功能的相關操作技巧,需要的朋友可以參考下2018-12-12