首頁 php教程 php手册 php/mysql/jquery实现各系统流行的瀑布流显示方式,实现很简单的

php/mysql/jquery实现各系统流行的瀑布流显示方式,实现很简单的

Jun 06, 2016 pm 08:13 PM
jquery mysql php 實現 系統

大家在用这个东西的时候一定要计得有这么几个文件,一个是jquery.js 还有就是你自己数据库的密码。和相对应的图片才可以正常看到效果。下面就是这里所有的代码!!!HTML文件:waterfall.html !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN

大家在用这个东西的时候一定要计得有这么几个文件,一个是jquery.js 还有就是你自己数据库的密码。和相对应的图片才可以正常看到效果。下面就是这里所有的代码!!! HTML文件:waterfall.html

<pre lang="php">

 
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>瀑布流-Derek</title>
 <script type="text/javascript" language="javascript" src="http://shaozhuqing.com/jquery.js"></script>
 <link type="text/css" rel="stylesheet" href="http://shaozhuqing.com/waterfall.css">
 <script type="text/javascript" language="javascript" src="http://shaozhuqing.com/waterfall.js"></script>
 
 
  
     
登入後複製
  /* * Javascript文件:waterfall.js */ $(function(){ jsonajax(); });   //这里就要进行计算滚动条当前所在的位置了。如果滚动条离最底部还有100px的时候就要进行调用ajax加载数据 $(window).scroll(function(){ //此方法是在滚动条滚动时发生的函数 // 当滚动到最底部以上100像素时,加载新内容 var $doc_height,$s_top,$now_height; $doc_height = $(document).height(); //这里是document的整个高度 $s_top = $(this).scrollTop(); //当前滚动条离最顶上多少高度 $now_height = $(this).height(); //这里的this 也是就是window对象 if(($doc_height - $s_top - $now_height) temp_h){ iheight = temp_h; $row = $(this); //此时$row是li对象了 } }); $item = $('
php/mysql/jquery实现各系统流行的瀑布流显示方式,实现很简单的
'+neirou.title+'
').hide(); $row.append($item); $item.fadeIn(); } } } }); }   /* * CSS文件:waterfall.css */   body{text-align:center;} /*Download by http://www.codefans.net*/ #stage{ margin:0 auto; padding:0; width:880px; } #stage li{ margin:0; padding:0; list-style:none;float:left; width:220px;} #stage li div{ font-size:12px; padding:10px; color:#999999; text-align:left; }     /* * php文件:data.php */ $v){ $json_arr[] = (object)$v; } //print_r($json_arr); echo json_encode( $json_arr );
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

CakePHP 日期和時間 CakePHP 日期和時間 Sep 10, 2024 pm 05:27 PM

CakePHP 日期和時間

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南 Dec 24, 2024 pm 04:42 PM

適用於 Ubuntu 和 Debian 的 PHP 8.4 安裝和升級指南

CakePHP 檔案上傳 CakePHP 檔案上傳 Sep 10, 2024 pm 05:27 PM

CakePHP 檔案上傳

CakePHP 路由 CakePHP 路由 Sep 10, 2024 pm 05:25 PM

CakePHP 路由

如何修復 MySQL 8.4 上的 mysql_native_password 未載入錯誤 如何修復 MySQL 8.4 上的 mysql_native_password 未載入錯誤 Dec 09, 2024 am 11:42 AM

如何修復 MySQL 8.4 上的 mysql_native_password 未載入錯誤

討論 CakePHP 討論 CakePHP Sep 10, 2024 pm 05:28 PM

討論 CakePHP

CakePHP 專案配置 CakePHP 專案配置 Sep 10, 2024 pm 05:25 PM

CakePHP 專案配置

CakePHP 快速指南 CakePHP 快速指南 Sep 10, 2024 pm 05:27 PM

CakePHP 快速指南

See all articles