1.test.php代码(html js)
瀑布流测试
";
}
?>
- $(function(){
- waterfall();
- //进行加载图片
- var count = getCount();
- $("#wf-main").on("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);
- // }
- //ajax 提交到action.php
- $.ajax({
- type: "POST",
- url: "action.php" ,
- data: {id:count},
- success: function(dat) {
- // var data = eval("("+dat +")");
- var data = JSON.parse(dat);
- console.log(data);
- if(data){
- $(data).each(function(id,status,url){
- $li = $("
- ").addClass("wf-cld").appendTo("#wf-main");
- $("
").attr({"src":this.url}).css({"width":"200px","height":"auto"}).appendTo($li); - });
- //确保滚动条高度保持不变
- var scroll_top = $(window).scrollTop();
- waterfall();
- $(window).scrollTop(scroll_top);
- }
- }
- });
- }
- });
- });
- //让图片折叠排列
- 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 < num_col){
- col_arr[index] = $(value).height();
- }else{
- var minH = Math.min.apply( null, col_arr );//数组pinHArr中的最小值minH
- var min_index = $.inArray(minH,col_arr); //获得最小索引值
- //数组中最小元素的高 + 新块的高 + 15 空格距离
- col_arr[min_index] += $child_main.eq(index).height() + 15;
- $(value).css({ //设置元素显示位置
- position:"absolute",
- top:minH + 15 ,
- left : $child_main.eq(min_index).position().left
- });
- var maxH = Math.max.apply(null,col_arr);
- $par_main.height(maxH); // 更改父元素高度
- }
- });
- }
- //是否进行夹杂滚动条 当最后一张图片顶部 到 最后一张图片自身高度的一半作为分界线
- function checkscrollside(){
- var $child_main = $("#wf-main>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
- }
- function getCount(){
- var length = $("#wf-main ").find("li").length;
- return length;
- }
2.action.php php代码
</>code
".$postId." limit 5;";
$re = mysql_query($query);
while($arr = mysql_fetch_assoc($re)) {
$arry [] = $arr;
}
exit(json_encode($arry));//这里一定要写成exit 之前写成return 一直报错,ajax远程调程序,得到数据。要停止程序并返回到ajax
文件目录
结果
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/50952.html
摘要:俗话说的好,不爱美女的程序员不是一个好司机妹子图煎蛋这几天一直在菜鸟教程学习和,想总结一下自己的学习成果,这个图片站也就这么自然而然地出来了,主要使用了图片瀑布流加载数据,页面静态化图片分页等方法进行实现图片瀑布流我这里分为两种瀑布流方法, 俗话说的好,不爱美女的程序员不是一个好司机!mm:http://mm.luckyw.cn/妹子图:http://mzt.luckyw.cn/煎蛋:...
摘要:前言最近在整理基础知识,接触到了几个常用的页面特效,其中觉得用原生实现瀑布流的案例十分有趣,于是与大家分享一下。瀑布流瀑布流,又称瀑布流式布局。通过定位的方式是我们实现瀑布流的最基本的原理,只要我们动态的设置它的值值,就能让它排列。 showImg(https://segmentfault.com/img/remote/1460000012621941?w=1052&h=542); 前...
阅读 2963·2023-04-25 18:58
阅读 1135·2021-11-25 09:43
阅读 1335·2021-10-25 09:46
阅读 3592·2021-09-09 11:40
阅读 1881·2021-08-05 09:59
阅读 974·2019-08-29 15:07
阅读 1030·2019-08-29 12:48
阅读 835·2019-08-29 11:19
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要