jquery实现瀑布流并与php实现数据交互
程序员文章站
2024-04-04 10:59:35
...
以前js 实现过一个瀑布流,jquery 也来实现一个
2 前台代码:
3 前台样式:
").addClass("wf-cld").appendTo("#wf-main"); $("").attr({"src":value.summary,"title":value.title}).css({"width":"200px","height":"auto"}).appendTo($li); }); $("input[name=offset]").val(parseInt(offset) + 10); console.log($("#wf-main>li").length); //确保滚动条高度保持不变 var scroll_top = $(window).scrollTop(); waterfall(); $(window).scrollTop(scroll_top); } },"json"); } }); });//让图片折叠排列function waterfall(){ var $par_main = $("#wf-main"); //父元素 var $child_main = $("#wf-main>li"); //子元素 var par_width = $par_main.width(); //获得父元素的宽度 var child_width = $child_main.eq(0).width(); //获得子元素宽度 var num_col = Math.floor(par_width / child_width); //一行显示多少列 var col_arr = []; //一列中所有元素相加后的高度 做多有num_col 个值 col_arr.length=0; $child_main.each(function(index,value){ if(index li"); var trigger_heigth = $child_main.last().get(0).offsetTop + $child_main.height() / 2; //滚动条高度 var scroll_top = $(window).scrollTop(); //获取页面宽度 var docu_width = $(document).width(); return (trigger_heigth
5 每次都重新加载新图片的后台代码:
主要思路:
1 先显示出来大概20张图片,使界面出现滚动条
2 设置显示出来图片父id 设置为relative 定位,图片定位方式为float 定位
3 使刚显示出来的图片作为折叠出现,呈现为瀑布流
4 当滚动 滚动条时,判断是否进行加载图片
5 使新加载的图片重新进行瀑布流排序
重点:
1 判断什么时间进行加载新图片
2 实现瀑布流式排序
怎样确定加载哪部分图片那,在后台limit 一下位置就ok啦
好,上代码:
1 先显示出来部分图片
//实现瀑布流显示图片 public function photo(){ $id = M("Cate")->field("id")->where("name = '相册展示'")->select(); $this->image_list = M("Blog")->field("content ,summary")->limit(10)->order("time desc")->where("cid = {$id[0]['id']}")->select(); $this->length=10;//刚开始显示10张图片 $this->cur_position = '相册展示'; $this->id = $id[0]['id']; $this->display(); }
2 前台代码:
3 前台样式:
4 重点 js 代码:
$(function(){ waterfall(); //进行加载图片 $(window).scroll(function(){ if(checkscrollside()){ var offset = $("input[name=offset]").val(); var length = $("input[name=length]").val(); var justice = $("input[name=justic]").val(); if(justice === offset){ return false; }else{ $("input[name=justic]").val(offset); } $.post( //每次添加新元素进行瀑布流排序 "/Index/Show/more_photo", { offset :offset, length:length },function(data){ if(data){ $(data).each(function(index,value){ $li = $("
5 每次都重新加载新图片的后台代码:
//根据ajax 每次显示出来部分图片 public function more_photo(){ $offset = $_POST['offset']; $length = $_POST['length']; $id = M("Cate")->field("id")->where("name = '相册展示'")->select(); $image_list = M("Blog")->field("content ,summary,title")->limit($offset,$length)->order("time desc")->where("cid = {$id[0]['id']}")->select(); exit(json_encode($image_list)); }
顺便秀秀战果了:
实际地址就是在个人博客上面啦:
http://buyingfeiblog.sinaapp.com/
代码进行时,敬请期待!
推荐阅读
-
jquery实现瀑布流并与php实现数据交互
-
jquery 插件实现瀑布流图片展示实例教程
-
PHP+Jquery与ajax相结合实现下拉淡出瀑布流效果【无需插件】
-
PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js) jquerymysqlphp
-
PHP+Mysql+jQuery实现中国地图区域数据统计(raphael.js) jquerymysqlphp
-
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
-
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
-
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
-
基于php(Thinkphp)+jquery 实现ajax多选反选不选删除数据功能
-
php+js 实现瀑布流效果