jQuery8种不同的瀑布流懒加载loading效果

优化图片加载插件jQuery8种不同的瀑布流懒加载loading效果


 在线预览

下载地址

实例代码

<ul class="grid effect-1" id="grid">

                <li><a href="#"><img src="/api/jq/5733e33ac28cb/images/5.jpg"></a></li>
                <li><a href="#"><img src="/api/jq/5733e33ac28cb/images/2.jpg"></a></li>
            </ul>
        </div>
        <script src="/api/jq/5733e33ac28cb/js/masonry.pkgd.min.js"></script>
        <script src="/api/jq/5733e33ac28cb/js/imagesloaded.js"></script>
        <script src="/api/jq/5733e33ac28cb/js/classie.js"></script>
        <script src="/api/jq/5733e33ac28cb/js/AnimOnScroll.js"></script>
        <script>
            new AnimOnScroll(document.getElementById(‘grid‘), {
                minDuration: 0.4,
                maxDuration: 0.7,
                viewportFactor: 0.2
            });
        </script>

  

时间: 2024-10-15 09:23:41

jQuery8种不同的瀑布流懒加载loading效果的相关文章

js实现瀑布流以及加载效果

一.瀑布流是个啥? 瀑布流,是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 最早采用瀑布流布局的网站是Pinterest,逐渐在国内流行开来,比如我们熟知的百度图片的布局,在"很久"以前,百度图片还是需要一页一页的点击进行查看更多图片,而现在的瀑布流布局使用户查找图片更加方便. 二.瀑布流的优缺点 优点: 1.节省了页面的空间,不再需要导航和页码按钮. 2.增强了用户的体验,使用户的体验更多的是在于浏览图

一个很酷的加载loading效果

一个很酷的加载loading效果,自定义LeafLoadingView实现,LeafLoadingView继承view,本例子主要由以下几点构成(1):RotateAnimation实现叶子旋转(2):叶子飘动(3):当前进度绘制当前进度条大体实现: @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas); // 绘制进度条和叶子        // 之所以把叶子放在进度条里绘制,主要是层级原

30种CSS3炫酷页面预加载loading动画特效

这是一组效果非常炫酷的CSS3页面预加载loading动画特效.该特效共有30种不同的loading效果.所有的加载动画都是使用CSS3来完成,jQurey代码只是用于隐藏加载动画.当你点击页面的任何一个地方时,loading动画就会被隐藏. 这30种loading动画分为3组:方形加载动画特效.圆形加载动画特效和长条形加载动画特效.每一种效果都有一个单独的页面,你可以对应查看每种效果的CSS代码. 效果演示:http://www.htmleaf.com/Demo/201504151683.ht

jQuery瀑布流+无限加载图片

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0px; padding: 0px; } #contianer { position: relative; font-size: 0; margin: 0 auto; }

基于jquery和knockout.js 写个瀑布流异步加载分页

<div class="list-view"> <ul> <li data-bind="foreach:datalst"> <div class="item border clearfix"> <div class="face fl"> <a target="_blank" data-bind="attr:{'title':user

瀑布流动态加载图片

简要截图: 项目链接:http://pan.baidu.com/s/1pK7foWb密码:epi1 github:https://github.com/shuai7boy/waterFall

74.手机端图片瀑布流的加载代码和效果

http://www.bin012.com/index.php?route=product/product&path=63&product_id=52 原文地址:https://www.cnblogs.com/sqyambition/p/11022935.html

Android 三种方式实现自定义圆形页面加载中效果的进度条

转载:http://www.eoeandroid.com/forum.php?mod=viewthread&tid=76872 一.通过动画实现 定义res/anim/loading.xml如下: [java] view plaincopy <?xml version="1.0" encoding="UTF-8"?> <animation-list android:oneshot="false" xmlns:androi

懒加载(Load on Demand)

懒加载,效果,最大程序减少服务器端的资源耗用. 懒加载是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程序上减少服务器端的资源耗用. 考虑这样一个例子:海尔电器是一个非常大的组织机构,它下有1万多个组织单元.由于组织单元的复杂性,组织单元间也存在在上下级关系.现在的问题是:用户想加入海尔电器的某个组织单元,他该怎么选择到这个组织单元呢? 很容易想到的一个解决方法是:查询数据库,把海尔电器的所有组织单元放到一个下拉列表中