php/mysql/jquery は、さまざまなシステムで人気のあるウォーターフォール フロー表示方法を実装します。

 

 

 

 

 <頭>

 

 

 

 

 

 

 

 

     

         

         

         

         

     

 

 

 

/*

 * JavaScript文件：waterfall.js

 */

$(関数(){

     jsonajax();

 });

 

 // ここでは、アニメーション ストライプの現在位置を計算します。 アニメーション ストライプが最下部に 100 ピクセル以上ある場合は、ajax を使用してデータの追加を実行します

 $(window).scroll(function(){

     //このメソッドは、アニメーション条項の実行時に発生する関数

     //最下部の 100 画素以上に移動したとき、新しいコンテンツを追加します

     var $doc_height,$s_top,$now_height;

     $doc_height = $(ドキュメント).height();        //ここはドキュメント全体の高さ

     $s_top = $(this).scrollTop();            //当前滚動条离最顶上の高さ

     $now_height = $(this).height();            //ここのこれもであることは window オブジェクト

     if(($doc_height - $s_top - $now_height)

 });

 

 

 //做一ajaxメソッド来请求data.php不断的获取データ据

 var $num = 0;

 関数 jsonajax(){

     

     $.ajax({

         URL:'data.php',

         タイプ:'POST',

         データ:"num="+$num++,

         データ型:'json',

         成功:関数(json){

             if(json の種類 == 'オブジェクト'){

                 var neirou,$row,iheight,temp_h;

                 for(var i=0,l=json.length;i

                     ねいろ = json[i];    //当前层データ

                     //找了高最少列做追加新内容

                     iheight = -1;

                     $("#ステージリ").each(function(){

                         //当前liの高さに到達

                         temp_h = Number($(this).height());

                         if(iheight == -1 iheight >temp_h){

                             iheight = temp_h;

                             $row = $(this); //今回は$row是li对オブジェクト了

                         }

                     });

                     $item = $('

'+neirou.title+'

')。隠す();

                     $row.append($item);

                     $item.fadeIn();

                 }

             }

         }

     });

 }

 

/*

 * CSS文例：waterfall.css

 */

 

body{text-align:center;}

/*http://www.php100.com*/

でダウンロード

#stage{ マージン:0 自動;パディング:0;幅:880ピクセル; }

#ステージリ{マージン:0;パディング:0;リストスタイル:なし;フロート:左;幅:220px;}

#stage li div{ font-size:12px;パディング:10px;色:#999999;テキスト整列:左; }

 

 

/*

 * php文件：data.php

 */

 $link = mysql_connect("localhost","root","");

 $sql = "ウォーターフォールを使用";

 mysql_query($sql,$link);

 $sql = "名前を設定します utf8";

 mysql_query($sql,$link);

 $num = $_POST['num'] *10;

 if($_POST['num'] != 0) $num +1;

 $sql = "コンテンツ制限 ".$num.",10 から img,title を選択";

 $result = mysql_query($sql,$link);

 $temp_arr = array();

 while($row = mysql_fetch_assoc($result)){

     $temp_arr[] = $row;

 }

 $json_arr = array();

 foreach($temp_arr as $k=>$v){

     $json_arr[] = (オブジェクト)$v;

 }

 //print_r($json_arr);

 echo json_encode( $json_arr );