流式布局- 流式图片

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);
     }
});

参考地址

时间: 2024-11-05 12:26:37

流式布局- 流式图片的相关文章

DIV+CSS列表式布局(同意图片的应用)

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <!--gbk,gb2312 中文-->

响应式布局--流式布局

如果布局使用百分比宽度,在不同的显示器上效果可能不太一样.固定像素尺寸的网页是匹配固定像素尺寸显示器的最简单办法.将固定像素宽度转换对应的百分比宽度: 目标元素宽度/上下文元素宽度=百分比宽度 em代替px主要是为了文字缩放.针对老版本IE,现在浏览器支持缩放像素为单位的文字了.优点:1.使用IE6的用户也将能缩放文字2.em的实际大小是相对于其上下文的字体大小而言. 现代浏览器的默认文字大小都是16像素(显示申明的除外)一开始给body标签应用下列任何一条规则所产生的效果都一样:font-si

bootstrap3 响应式布局栅格式布局

抓住重点 下面开始实现Bootstrap版本3的Demo 案例 首先去官方网站  http://www.bootcss.com/ 下载 点击 进入 点击 进入 下载 把 相关的js和css 拷贝到项目中 为了看到直观的 效果  我们给了div 添加了背景样式 现在  看看效果 尽管屏幕在变小 恒向 也不会出现 滚动条   简单吧

浏览器兼容与响应式布局

主流浏览器有5种:IE.chrome.firefox.safari.opera.   浏览器兼容 ?  浏览器私有前缀 -moz-            火狐浏览器 -webkit-          360.苹果.猎豹.搜狗.QQ. Chrome等浏览器 -o-               Opera/欧朋浏览器 -ms-              IE.百度等浏览器 ?  跨浏览器的默认样式 Normalize.css  是替代 Reset.css,保护有用的浏览器默认样式,修改浏览器自身B

在等高响应式布局理的一些问题

①   高度调整公式会产生百分比,浏览器是会直接取整,因此可能会产生-2到2px的误差: 解决方法:调整后记录每行误差值gap,然后循环把gap的值分给同行每一张图片,这样前2张图片可能会有±1px的图片宽度变化,但是用户基本觉察不了图片的轻微拉伸变化. ②   等高响应式布局里用户图片数可能过少,会有图片只有1-3张占不满一行的情况,该怎样显示布局: 解决方法:判断只有1行图片的时候不作布局调整,少于1行则默认显示等高变化后的图片即可(即只调整一次,不需要为剩余值再自适应). ③    每行调

html5 响应式布局

响应式布局 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 响应式设计的步骤就是1.编

响应式布局的开发基础

第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 了解了什么是响应式,那么接下来我们就要

响应式布局总结

响应式布局的开发基础知识 本章主要分为以下几个部分 正确理解响应式设计 响应式设计的步骤 响应式设计需要注意的问题 响应式网页布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于

浅谈html5 响应式布局

一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本. 这个概念是为解决移动互联网浏览而诞生的.响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过. 随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 二.响应式布局有哪些优点和缺点?   优点: 面对不同分辨率设备灵活性强