jquery實(shí)現(xiàn)瀑布流效果分享
使用jquery實(shí)現(xiàn)瀑布流效果，大家參考使用吧，運(yù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">下一頁(yè)</a></div>
<script>
$(function() {
var $container = $("#container");
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.box',
isAnimated: true,
columnWidth:200,
gutterWidth:200,
// isFitWidth:true,//自適應(yīng)寬度
isResizableL:true// 是否可調(diào)整大小
});
});
$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瀑布流插件使用介紹
- jQuery 瀑布流 浮動(dòng)布局（一）(延遲AJAX加載圖片)
- jQuery瀑布流插件Wookmark使用實(shí)例
- jQuery Masonry瀑布流插件使用詳解
- jQuery 瀑布流 絕對(duì)定位布局（二）(延遲AJAX加載圖片)
- jQuery實(shí)現(xiàn)瀑布流布局
- jQuery實(shí)現(xiàn)瀑布流布局詳解（PC和移動(dòng)端）
- jQuery.lazyload+masonry改良圖片瀑布流代碼
- jquery簡(jiǎn)單瀑布流實(shí)現(xiàn)原理及ie8下測(cè)試代碼
- 基于jQuery實(shí)現(xiàn)瀑布流頁(yè)面
相關(guān)文章
jQuery實(shí)現(xiàn)的簡(jiǎn)單對(duì)話框拖動(dòng)功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單對(duì)話框拖動(dòng)功能,涉及jQuery事件響應(yīng)、數(shù)值運(yùn)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-06-06
jQuery配合coin-slider插件制作幻燈片效果的流程解析
coin-slider是GitHub上的一個(gè)人氣JavaScript開源插件,用它來實(shí)現(xiàn)幻燈片效果只需要?jiǎng)邮謱懞苌俚拇a,下面我們就來看一下jQuery配合coin-slider插件制作幻燈片效果的流程解析.2016-05-05
今天針對(duì)這個(gè)JQuery里面的toggle聊幾句，文章中涉及到了一些問題望牛牛們能幫忙解惑一下。2009-11-11
在一些網(wǎng)站上，我們經(jīng)常見到返回頂部的效果，本文給大家介紹基于jquery如何實(shí)現(xiàn)返回頂部效果，非常不錯(cuò)，感興趣的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery數(shù)據(jù)緩存用法,較為詳細(xì)的分析了jQuery數(shù)據(jù)緩存的功能、定義與相關(guān)的使用技巧,需要的朋友可以參考下2015-02-02
基于jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕圖片橫向滾動(dòng)
點(diǎn)擊左右按鈕圖片橫向滾動(dòng)jquery，一次滾動(dòng)四個(gè)，圖片滾動(dòng)完成，自動(dòng)回到第一個(gè)版面，效果相當(dāng)不錯(cuò)，感興趣的前端工程師們可以參考下2013-04-04
Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏
這篇文章主要與大家分享Jquery設(shè)置attr的disabled屬性控制某行顯示或者隱藏的具體實(shí)現(xiàn)，喜歡的朋友可以參考下2014-09-09
jQuery改變form表單的action,并進(jìn)行提交的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query改變form表單的action,并進(jìn)行提交的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jQuery Easyui datagrid連續(xù)發(fā)送兩次請(qǐng)求問題
用上述方式動(dòng)態(tài)加載datagrid的數(shù)據(jù)時(shí)，通過net監(jiān)聽，發(fā)現(xiàn)調(diào)用了兩遍XX方法，目前的解決方案是，將url放到datagrid初始化的時(shí)候執(zhí)行2016-12-12
jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)側(cè)邊欄隱藏與顯示的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了jQuery基于事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)元素顯示與隱藏功能的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12