伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】

所属分类:UI-布局
 31844  168  查看评论 (11)
伟德BETVICTOR_手机1946韦德最新网站_韦德1946手机版客户端【唯一授权官网】 ie兼容6
================== 以下代码由 冷星 提供 ===================ajax获得数据,显示,会存在问题,需要修改一下ajax那部分的代码,其他地方动画会相互干扰,我的是这样的,服务器端语言PHP ,,页面上的script如下

<script type="text/javascript"> var count={$count};//从服务器端得到的总的数据条数 function deleteShow(){ $('.sp2').each(function(index, element) { var staff_number=$(this).attr('name'); var myNum=$('#staff_number').text(); if(myNum==staff_number){ $(this).show(); var delLi=$(this).parents('li'); $(this).unbind('click').click(function(e) { var log_id=$(this).children('b').attr('class'); $.post('{:U("deletelog")}',{log_id:log_id},function(data,status){ if(data==1){ alertBox('删除成功',2000,2000); count--; delLi.remove(); }else{alertBox('删除失败了!',2000,2000);} }); }); }else{ $(this).hide(); } }); } $(document).ready(function(e) {         deleteShow();     }); /* 抛开瀑布流布局各种乱七八糟的算法,基于masonry的瀑布流,很是简单的,而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。 masonry还有很多参数我这里注解了常用的参数  */ $(function(){ /*瀑布流开始*/ var container = $('.waterfull ul'); var loading=$('#imloading'); // 初始化loading状态 loading.data("on",true); /*判断瀑布流最大布局宽度,最大为1280*/ function tores(){ var tmpWid=$(window).width(); if(tmpWid>1280){ tmpWid=1280; }else{ var column=Math.floor(tmpWid/320); tmpWid=column*320; } $('.waterfull').width(tmpWid); } tores(); $(window).resize(function(){ tores(); }); container.imagesLoaded(function(){   container.masonry({    columnWidth: 320,     itemSelector : '.item',     isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false     isAnimated: true,//是否采用jquery动画进行重拍版     isRTL:false,//设置布局的排列方式,即:定位砖块时,是从左向右排列还是从右向左排列。默认值为false,即从左向右     isResizable: true,//是否自动布局默认true     animationOptions: { duration: 800, easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果,如果没引用删除这行,默认是匀速变化 queue: false//是否队列,从一点填充瀑布流 }   }); }); /*模拟从后台获取到的数据*/ var dataLoading = false; var canColorChange = true; $(window).scroll(function(){ if(!loading.data("on")) return; if(dataLoading) return; // 计算所有瀑布流块中距离顶部最大,进而在滚动条滚动时,来进行ajax请求,方法很多这里只列举最简单一种,最易理解一种 var itemNum=$('#waterfull').find('.item').length; var itemArr=[]; itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight; itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight; itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight; var maxTop=Math.max.apply(null,itemArr); if(maxTop<$(window).height()+$(document).scrollTop()){ //加载更多数据 //var lilength=$('.item').length+1; var sqlJson=''; dataLoading = true; $.get("{:U('showlogAjax')}",{last:itemNum},function(data,status){ if(status == "success"){ sqlJson = eval("("+data+")"); loading.data("on",false).fadeIn(800); addFlow(sqlJson); }else{ alert('出错了!'); } dataLoading = false; }); } function  addFlow(sqlJson){ /*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/ if(itemNum>=count){ loading.text('就有这么多了!'); }else{ var html=""; for(var i in sqlJson){ html+="<li class='item'><a href="http://yzshield.com/#39;####' class='a-img'></a>"" html+="<h2 class='li-title'>"+sqlJson[i].log_title+"</h2>"; html+="<div class='description'>"+sqlJson[i].log_text+"</div><div class='qianm clearfloat'>"; html+="<span class='sp1'><b>"+sqlJson[i].staff_name+"</b></span>"; html+="<span class='sp2' name="+sqlJson[i].staff_number+"><b class="+sqlJson[i].log_id+">删除</b></span>"; html+="<span class='sp3'>"+sqlJson[i].log_date+"</span></div></li>"; } /*模拟ajax请求数据时延时800毫秒*/ var time=setTimeout(function(){ var $newElems = $(html).css({ opacity: 0}).appendTo(container); $newElems.imagesLoaded(function(){ canColorChange = false; $newElems.animate({ opacity: 1},800, function(){ canColorChange = true; }); container.masonry( 'appended', $newElems,true); loading.data("on",true).fadeOut(); clearTimeout(time); deleteShow(); }); },800) } } }); /*item hover效果*/ var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B']; $('#waterfull').on('mouseover','.item',function(){ if(!canColorChange) return; var random=Math.floor(Math.random() * 4); $(this).stop(true).animate({'backgroundColor':rbgB[random]},1000); }); $('#waterfull').on('mouseout','.item',function(){ if(!canColorChange) return; $(this).stop(true).animate({'backgroundColor':'#fff'},1000); }); })     </script>
相关伟德BETVICTOR-布局

基于bootstrap的UI框架Funky Tunes UI Kit

这个Funky Tunes组件设计有梦幻般的美丽,适合用在音乐、视频类的APP或网站。基于bootstrap的UI框架Funky Tunes UI Kit非常实用
  布局
 15871  101

Flatlab_Admin黑灰色扁平化自适应手机

一款经典的国外HTML5模板,支持自适应功能 这是一款不错的后台,很漂亮的UI设计!
  布局
 17870  159

响应式完整网站案例+源码

完整的网站前端+源码,各种控件功能齐全,最适合入门者
  布局
 27243  424

基于 Bootstrap 的响应式电商前台模板

基于 Bootstrap 的响应式电商前台模板,7种模板可供选择
  布局
 21279  282

讨论这个项目(11)回答他人问题或分享伟德BETVICTOR使用方法奖励jQ币

    EvenRsh 0
    2017/11/24 19:26:28
    车车-阿源 0
    2017/10/24 9:08:40
    能修改成正常淡入么?飘的时候会出错。 回复
    蘫銫の等鴏 0
    2016/11/6 12:11:38
    Mr_zou 0
    2016/10/26 19:10:44
    Hnyer 0
    2016/8/30 10:08:26
    可以改成点击加载更多吗  回复
    寂夜流星 0
    2016/8/19 18:08:15
    这些图片是有鼠标悬停效果的,因为这个demo中的js有一句写错了,悬停效果没显示出来我把错误的那句注释掉了,悬停效果换成了阴影。结果图片在飞入的过程中,那个悬停的阴影会影响图片最终的位置,请问怎么能改一下呢
        寂夜流星0
        2016/8/19 18:08:55
        重新试验了下,不是阴影的问题。是鼠标的问题。            图片飞入过程中,如果经过鼠标焦点就有几率图片就不飞了。。。
    回复
    寂夜流星 0
    2016/8/17 13:08:03
    碎秋の稻草 0
    2016/4/6 15:04:57
    ☆风雅颂☆ 0
    2016/3/18 11:03:54
    bjerg 0
    2015/11/12 16:11:58
取消回复