search
HomeBackend DevelopmentPHP TutorialCombining PHP Jquery and ajax to achieve drop-down and fade-out waterfall flow effect [no plug-ins required], jqueryajax_PHP tutorial

PHP Jquery combined with ajax to achieve drop-down and fade-out waterfall flow effect [no plug-in required], jqueryajax

Introduction:

Waterfall flow, also known as waterfall flow layout. It is a relatively popular website page layout. The visual performance is a jagged multi-column layout. As the page scroll bar scrolls down, this layout will continuously load data blocks and append them to the current tail. The first website to adopt this layout was Pinterest, which gradually became popular in the country. Most domestic fresh websites are basically of this style, such as Huaban.com, Mogujie, Meilishuo, etc.

No nonsense, let’s go straight to the code. The entire code is divided into two sections of code. The specific code is as follows.

Front desk:

<&#63;php <br>$category=$this->getMyVal('category',$_GET);<br>$xiaohuaList=Xiaohua::model()->getXiaohao($category); //打开页面默认显示的数据<br>&#63;><br><br><div id="waterfall">
<&#63;php foreach ($xiaohuaList as $xiaohua):&#63;>
<&#63;php $q_id=$xiaohua->id;&#63;>
<div class="cell m-bg item-h border_h">
<div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong class="color-5 fx_t_<&#63;php echo $q_id;&#63;>"><&#63;php echo CHtml::encode($xiaohua->title);&#63;></strong></div>
<div class="padding-t-5 fx_c_<&#63;php echo $q_id;&#63;>"><&#63;php echo $xiaohua->content;&#63;></div>
<div class="padding-t-5 text-right"><span onclick="fx(<&#63;php echo $q_id;&#63;>);" class="fx cursor_p" data-id="<&#63;php echo $q_id;&#63;>"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div>
</div>
<&#63;php endforeach;&#63;>
</div>
<script>
var opt={
getResource:function(index,render){//index为已加载次数,render为渲染接口函数,接受一个dom集合或jquery对象作为参数。通过ajax等异步方法得到的数据可以传入该接口进行渲染,如 render(elem)
var html='';
var _url='<&#63;php echo $this->createUrl('listXiaohua');&#63;>';
$.ajax({
type: "get",
url: _url,
dataType : "json",
async:false,
success: function(data){
for( var i in data){
var q_id=data[i].id;
html+='<div class="cell m-bg item-h border_h"><div class="border-solid-b padding-b-5 text-center"><span class="g-bg glyphicon glyphicon-sunglasses margin-r-5" aria-hidden="true"></span><strong class="color-5 fx_t_'+q_id+'">'+data[i].title+'</strong></div><div class="padding-t-5 fx_c_'+q_id+'">'+data[i].content+'</div>'
+'<div class="padding-t-5 text-right"><span onclick="fx('+q_id+');" class="fx cursor_p" data-id="'+q_id+'"><span class="g-bg glyphicon glyphicon-share-alt margin-r-5" aria-hidden="true"></span>分享</span></div></div>';
}
}});
return $(html);
},
column_width:376,
column_space:10,
auto_imgHeight:true,
insert_type:1
}
$('#waterfall').waterfall(opt);
</script> 

Backstage:

public function actionListXiaohua() {
$xiaohuaList=Xiaohua::model()->getXiaohua();//获取笑话信息
echo CJSON::encode($xiaohuaList);
}

js:

;(function($){
var
//参数
setting={
column_width:240,//列宽
column_className:'waterfall_column',//列的类名
column_space:2,//列间距
cell_selector:'.cell',//要排列的砖块的选择器,context为整个外部容器
img_selector:'img',//要加载的图片的选择器
auto_imgHeight:true,//是否需要自动计算图片的高度
fadein:true,//是否渐显载入
fadein_speed:600,//渐显速率,单位毫秒
insert_type:1, //单元格插入方式,1为插入最短那列,2为按序轮流插入
getResource:function(index){ } //获取动态资源函数,必须返回一个砖块元素集合,传入参数为加载的次数
},
//
waterfall=$.waterfall={},//对外信息对象
$waterfall=null;//容器
waterfall.load_index=0, //加载次数
$.fn.extend({
waterfall:function(opt){
opt=opt||{};
setting=$.extend(setting,opt);
$waterfall=waterfall.$waterfall=$(this);
waterfall.$columns=creatColumn();
render($(this).find(setting.cell_selector).detach(),false); //重排已存在元素时强制不渐显
waterfall._scrollTimer2=null;
$(window).bind('scroll',function(){
clearTimeout(waterfall._scrollTimer2);
waterfall._scrollTimer2=setTimeout(onScroll,300);
});
waterfall._scrollTimer3=null;
$(window).bind('resize',function(){
clearTimeout(waterfall._scrollTimer3);
waterfall._scrollTimer3=setTimeout(onResize,300);
});
}
});
function creatColumn(){//创建列
waterfall.column_num=calculateColumns();//列数
//循环创建列
var html='';
for(var i=0;i<waterfall.column_num;i++){
html+='<div class="'+setting.column_className+'" style="width:'+setting.column_width+'px; display:inline-block; *display:inline;zoom:1; margin-left:'+setting.column_space/2+'px;margin-right:'+setting.column_space/2+'px; vertical-align:top; overflow:hidden"></div>';
}
$waterfall.prepend(html);//插入列
return $('.'+setting.column_className,$waterfall);//列集合
}
function calculateColumns(){//计算需要的列数
var num=Math.floor(($waterfall.innerWidth())/(setting.column_width+setting.column_space));
if(num<1){ num=1; } //保证至少有一列
return num;
}
function render(elements,fadein){//渲染元素
if(!$(elements).length) return;//没有元素
var $columns = waterfall.$columns;
$(elements).each(function(i){
if(!setting.auto_imgHeight||setting.insert_type==2){//如果给出了图片高度,或者是按顺序插入,则不必等图片加载完就能计算列的高度了
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
return true;//continue
}
if($(this)[0].nodeName.toLowerCase()=='img'||$(this).find(setting.img_selector).length>0){//本身是图片或含有图片
var image=new Image;
var src=$(this)[0].nodeName.toLowerCase()=='img'&#63;$(this).attr('src'):$(this).find(setting.img_selector).attr('src');
image.onload=function(){//图片加载后才能自动计算出尺寸
image.onreadystatechange=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
image.onreadystatechange=function(){//处理IE等浏览器的缓存问题:图片缓存后不会再触发onload事件
if(image.readyState == "complete"){
image.onload=null;
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
image=null;
}
}
image.src=src;
}else{//不用考虑图片加载
if(setting.insert_type==1){
insert($(elements).eq(i),setting.fadein&&fadein);//插入元素
}else if(setting.insert_type==2){
insert2($(elements).eq(i),i,setting.fadein&&fadein);//插入元素
}
}
});
}
function public_render(elems){//ajax得到元素的渲染接口
render(elems,true);
}
function insert($element,fadein){//把元素插入最短列
if(fadein){//渐显
$element.css('opacity',0).appendTo(waterfall.$columns.eq(calculateLowest())).fadeTo(setting.fadein_speed,1);
}else{//不渐显
$element.appendTo(waterfall.$columns.eq(calculateLowest()));
}
}
function insert2($element,i,fadein){//按序轮流插入元素
if(fadein){//渐显
$element.css('opacity',0).appendTo(waterfall.$columns.eq(i%waterfall.column_num)).fadeTo(setting.fadein_speed,1);
}else{//不渐显
$element.appendTo(waterfall.$columns.eq(i%waterfall.column_num));
}
}
function calculateLowest(){//计算最短的那列的索引
var min=waterfall.$columns.eq(0).outerHeight(),min_key=0;
waterfall.$columns.each(function(i){
if($(this).outerHeight()<min){
min=$(this).outerHeight();
min_key=i;
}
});
return min_key;
}
function getElements(){//获取资源
$.waterfall.load_index++;
return setting.getResource($.waterfall.load_index,public_render);
}
waterfall._scrollTimer=null;//延迟滚动加载计时器
function onScroll(){//滚动加载
clearTimeout(waterfall._scrollTimer);
waterfall._scrollTimer=setTimeout(function(){
var $lowest_column=waterfall.$columns.eq(calculateLowest());//最短列
var bottom=$lowest_column.offset().top+$lowest_column.outerHeight();//最短列底部距离浏览器窗口顶部的距离
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop||0;//滚动条距离
var windowHeight=document.documentElement.clientHeight||document.body.clientHeight||0;//窗口高度
if(scrollTop>=bottom-windowHeight){
render(getElements(),true);
}
},100);
}
function onResize(){//窗口缩放时重新排列
if(calculateColumns()==waterfall.column_num) return; //列数未改变,不需要重排
var $cells=waterfall.$waterfall.find(setting.cell_selector);
waterfall.$columns.remove();
waterfall.$columns=creatColumn();
render($cells,false); //重排已有元素时强制不渐显
}
})(jQuery); 

The above is the editor’s introduction to the combination of PHP Jquery and ajax to achieve the drop-down and fade-out waterfall flow effect [no plug-ins required]. I hope it will be helpful to you. If you have any questions during the use, Please leave me a message and I will reply to you in time. At the same time, we are also very grateful to everyone for supporting the Bangkejia website!

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/1123801.htmlTechArticlePHP Jquery is combined with ajax to achieve the drop-down and fade-out waterfall flow effect [no plug-ins required], jqueryajax introduction: Waterfall flow, and It is called waterfall flow layout. It is a popular website page layout...
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
PHP's Purpose: Building Dynamic WebsitesPHP's Purpose: Building Dynamic WebsitesApr 15, 2025 am 12:18 AM

PHP is used to build dynamic websites, and its core functions include: 1. Generate dynamic content and generate web pages in real time by connecting with the database; 2. Process user interaction and form submissions, verify inputs and respond to operations; 3. Manage sessions and user authentication to provide a personalized experience; 4. Optimize performance and follow best practices to improve website efficiency and security.

PHP: Handling Databases and Server-Side LogicPHP: Handling Databases and Server-Side LogicApr 15, 2025 am 12:15 AM

PHP uses MySQLi and PDO extensions to interact in database operations and server-side logic processing, and processes server-side logic through functions such as session management. 1) Use MySQLi or PDO to connect to the database and execute SQL queries. 2) Handle HTTP requests and user status through session management and other functions. 3) Use transactions to ensure the atomicity of database operations. 4) Prevent SQL injection, use exception handling and closing connections for debugging. 5) Optimize performance through indexing and cache, write highly readable code and perform error handling.

How do you prevent SQL Injection in PHP? (Prepared statements, PDO)How do you prevent SQL Injection in PHP? (Prepared statements, PDO)Apr 15, 2025 am 12:15 AM

Using preprocessing statements and PDO in PHP can effectively prevent SQL injection attacks. 1) Use PDO to connect to the database and set the error mode. 2) Create preprocessing statements through the prepare method and pass data using placeholders and execute methods. 3) Process query results and ensure the security and performance of the code.

PHP and Python: Code Examples and ComparisonPHP and Python: Code Examples and ComparisonApr 15, 2025 am 12:07 AM

PHP and Python have their own advantages and disadvantages, and the choice depends on project needs and personal preferences. 1.PHP is suitable for rapid development and maintenance of large-scale web applications. 2. Python dominates the field of data science and machine learning.

PHP in Action: Real-World Examples and ApplicationsPHP in Action: Real-World Examples and ApplicationsApr 14, 2025 am 12:19 AM

PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

PHP: Creating Interactive Web Content with EasePHP: Creating Interactive Web Content with EaseApr 14, 2025 am 12:15 AM

PHP makes it easy to create interactive web content. 1) Dynamically generate content by embedding HTML and display it in real time based on user input or database data. 2) Process form submission and generate dynamic output to ensure that htmlspecialchars is used to prevent XSS. 3) Use MySQL to create a user registration system, and use password_hash and preprocessing statements to enhance security. Mastering these techniques will improve the efficiency of web development.

PHP and Python: Comparing Two Popular Programming LanguagesPHP and Python: Comparing Two Popular Programming LanguagesApr 14, 2025 am 12:13 AM

PHP and Python each have their own advantages, and choose according to project requirements. 1.PHP is suitable for web development, especially for rapid development and maintenance of websites. 2. Python is suitable for data science, machine learning and artificial intelligence, with concise syntax and suitable for beginners.

The Enduring Relevance of PHP: Is It Still Alive?The Enduring Relevance of PHP: Is It Still Alive?Apr 14, 2025 am 12:12 AM

PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

WebStorm Mac version

WebStorm Mac version

Useful JavaScript development tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment