• 流式布局- 流式图片


    var imgSizer = {
        Config : {
            imgCache : []
            ,spacer : "/path/to/your/spacer.gif"
        }
    
        ,collate : function(aScope) {
            var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
            if (isOldIE && document.getElementsByTagName) {
                var c = imgSizer;
                var imgCache = c.Config.imgCache;
    
                var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
                for (var i = 0; i < images.length; i++) {
                    images[i].origWidth = images[i].offsetWidth;
                    images[i].origHeight = images[i].offsetHeight;
    
                    imgCache.push(images[i]);
                    c.ieAlpha(images[i]);
                    images[i].style.width = "100%";
                }
    
                if (imgCache.length) {
                    c.resize(function() {
                        for (var i = 0; i < imgCache.length; i++) {
                            var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);
                            imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px";
                        }
                    });
                }
            }
        }
    
        ,ieAlpha : function(img) {
            var c = imgSizer;
            if (img.oldSrc) {
                img.src = img.oldSrc;
            }
            var src = img.src;
            img.style.width = img.offsetWidth + "px";
            img.style.height = img.offsetHeight + "px";
            img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
            img.oldSrc = src;
            img.src = c.Config.spacer;
        }
    
        // Ghettomodified version of Simon Willison's addLoadEvent() -- http://simonwillison.net/2004/May/26/addLoadEvent/
        ,resize : function(func) {
            var oldonresize = window.onresize;
            if (typeof window.onresize != 'function') {
                window.onresize = func;
            } else {
                window.onresize = function() {
                    if (oldonresize) {
                        oldonresize();
                    }
                    func();
                }
            }
        }
    }
    addLoadEvent(function() {
         if (document.getElementById && document.getElementsByTagName) {
              var aImgs = document.getElementById("content").getElementsByTagName("img");
              imgSizer.collate(aImgs);
         }
    });

     参考地址

  • 相关阅读:
    前端 network
    C语言的安装及使用
    c语言
    mongodb
    大型网站--负载均衡架构
    双机热备ROSE HA工作原理
    Linux vmstat命令实战详解
    管理员必备的20个Linux系统监控工具
    linux top命令详解
    linux命令TOP参数load average详解[转]
  • 原文地址:https://www.cnblogs.com/czhyuwj/p/5965299.html
Copyright © 2020-2023  润新知