如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
關于跨瀏覽器問題一直是一個大問題， 所以我決定在此做一個記錄， 當然不可能把跨瀏覽器問題一下子都搞定， 所以該文章將是一個長期的過程， 當coding時遇到了， 就會完善該文。
關于xhr對象， ie7需要之前的需要使用ActiveXObject對象來實現， 而且存在三個不同的版本。 雖然現在已經不用兼容ie7以前的瀏覽器了， 還是可以了解一下：
//最終版本
寫在前面的話
添加事件
var EventUtil = { /*
*添加事件
*/ addHandler: function(element, type, handler) { if(element.addEventListener){ element.addEventListener(type, handler, false)
}else if(element.attachEvent){ element.attachEvent('on'+type, handler)
}else{ element['on'+type] = handler
}
}, /*
*刪除事件
*/ removeHandler: function(element, type, handler){ if(element.removeEventListener){ element.removeEventListener(type, handler, false)
}else if(element.detachEvent){ element.detachEvent('on'+type, handler)
}else { element['on'+type] = null }
}, /*
*獲得事件對象
*/ getEvent: function(event){ return event ? event : window.event //ie瀏覽器的事件對象是window對象的屬性， 所以需要window.event來獲取。 }, /*
*獲得事件對象的事件目標（觸發事件的事件目標）
*/ getTarget: function(event){ return event.target || event.srcElement //這是||符號的另一種用法， 遇到true就返回。 }, /*
*阻止默認事件
*/ preventDefault: function(event){ if(event.preventDefault){
event.preventDefault
}else{
event.returnValue = false }
}, /*
*阻止事件冒泡
*/ stopPropagation: function(event){ if(event.stopPropagation){
event.stopPropagation()
}else {
event.cancelBubble = true }
}
} // stopPropagation()方法既可以阻止事件冒泡，也可以阻止事件捕獲，也可以阻止處于目標階段。
ajax事件
//適用于IE7之前的版本
function createXHR(){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
i,
len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳過 }
}
} return new ActiveXObject(arguments.callee.activeXString)
}
function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest()
}else if(typeof ActiveXObject != 'undefined'){ if(typeof arguments.callee.activeXString != 'string'){ var versions = ['MSXML2.XMLHttp.6.0', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'],
i,
len; for(i = 0; len = version.length; i++){ try{ new ActiveXObject(veersions[i]); arguments.callee.activeXString = versions[i] break }catch(ex){ //跳過 }
}
} return new ActiveXObject(arguments.callee.activeXString)
}else { throw new Error("NO XHR object availabel")
}
}
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
偽類和偽元素就是為文檔中不一定存在的結構指定樣式，或者為某些元素（甚至文檔本身）的狀態所指示的幻象類指定樣式。css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。
偽類的形式：選擇符: 偽類{ 屬性:屬性值 }
偽元素的形式：選擇符:: 偽元素{ 屬性:屬性值 }
CSS3規范中要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類。
a:link{…} //指向未訪問的鏈接
a:visited{…} //指向已訪問的鏈接
E:hover{…} //元素上有鼠標指針停留
E:active{…} //元素被用戶輸入激活
E:focus{…} //元素擁有輸入焦點
偽類的順序很重要，一般為link-visited-focus-hover-active。動態偽類可以應用到任何元素，可以為用戶提供一種“強調”的作用。
E:first-child{…}
為父元素（可以body，div，ul，ol等）中的第一個子元素E元素設置樣式，注意，E必須是父元素中的第一個子元素。
E:lang(value)
為E元素中lang屬性為value的元素設置屬性。相當于E[lang |= “value”]。
a:link:hover{…}//鼠標停留在未訪問的鏈接上
a:visited:hover{…}//鼠標停留在已訪問的鏈接上
在文檔中插入假想元素，導致用戶代理對一個假想元素做出響應。
p:first-letter{…} //設置首字母樣式，為p塊級元素第一個元素設置樣式
p:first-line{…} //設置第一行的樣式，為p塊級元素第一個元素設置樣式
所有偽元素都必須放在出現該偽元素的選擇器的最后面。
E:before {content:”…”}
E:after {content:”…”}
注：關于偽類和偽元素，我的理解并不是很深，不過掌握上面的這些內容，我想也是夠用了。以上內容大部分是《CSS權威指南》中內容，總結了一下方便記憶。關于偽類和偽元素的內容，這里有一個不錯的文章，下面是這篇文章的鏈接：http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/#prettyPhoto 下面的內容引自這篇文章，可以補充上面的內容，貼在這里方便自己日后查閱。
定義：
鏈接偽類
動態偽類
結合偽類
偽元素選擇器
設置之前和之后元素的樣式
偽類與偽元素的具體用法
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
說一下vue的聲明周期：
vue 的生命周期11個鉤子函數是按照以下的順序來的 ：（不可逆轉哦,第11個除外）
如，寫一個子組件，然后掛在到父組件，在子組件中，console.log 子組件中的
.
二. vue啟動前后
這兩個的意思就是，
當
可以獲取
.
三. 組件更新前后
這個就不用我多說了吧？當子組件里面的
再點一次
四. 組件銷毀前后(一般配合
給這個子組件用
所以
五. 組件激活時，未激活時
這兩個鉤子函數呢一般配合
這時候我們就可以用
說一下
六. 當捕獲一個來自子孫組件的錯誤時被調用
當子孫組件報錯的時候，父組件會觸發這個鉤子函數，并且會返回三個參數，
具體第11個沒深入研究，喜歡的可以去看下官網的 errorCaptured。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
一. 組件創建前后
1.beforeCreate
2.created
data（）{ return { a:1 },
beforeCreate(){
console.log(this.a)//undefined },
created(){
console.log(this.a)//1 }
}
.
3.beforeMount 4.mounted
vue在beforeMount時，還不管事，也就是說，還沒有渲染數據到<div id="app"><div/>里面，此時的這個組件還是空的
mounted時，才會往<div id="app"><div/> 添加東西，也就是vue正式
接管<div id="app"><div/>
#app的innerHTML查看差異；
beforeMount(){ console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){ console.log(document.getElementById('app').innerHTML)//#app里的內容 }
.
5.beforeUpdate 6.updated
視圖改變 的時候觸發。
如，做一個按鈕，讓data里面的a++，假如 一開始a是1
beforeUpdate返回1
updated返回2
beforeUpdate(){
console.log(document.getElementById('a').innerHTML)//1 },
updated(){
console.log(document.getElementById('a').innerHTML)//2 }
beforeUpdate返回2
updated返回3。。。
.
.
v-if使用)
7.beforeDestroy
8.destroyed
v-if來控制它的銷毀和創建，注意以下：v-show不行。
子組件銷毀前觸發beforeDestroy
子組件銷毀后觸發destroyed
第一次會觸發7.8.
創建子組件后會觸發以上的第1.2.3.4.鉤子函數。
有一個問題，如果我們在子組件里寫一個定時器，然后，子組件被銷毀了，定時器還會執行嗎？
答案是會的
所以這時候就會用到了destroyed,在組件被銷毀后，我們把定時器給清除就好了。
這兩個鉤子函數一般用于做性能的優化。
.
.
9.activated
10.deactivated
<keep-alive><keep-alive/>來使用。
通過看 四。這個例子，你肯定知道了一個組件怎么被銷毀和創建。
但是我們知道通常一個組件是很大的，如果我們總是一直創建、銷毀、創建、銷毀。。。這樣很不合理，而且很浪費性能。。。
<keep-alive><keep-alive/>配合著兩個鉤子函數來控制組件的激活和不激活。
<keep-alive><keep-alive/>，它就相當于把你的組件給緩存下來了，目的呢就是不讓組件重復的渲染，然后我們通過v-if觸發，子組件就不會再觸發7 和 8 了，而是只會頻繁的觸發9 和 10
這樣性能會比7 和 8 好的多。
.
.
11.errorCaptured
第一個參數是 錯誤對象
第二個參數是 報錯的子孫組件
第三個參數是 報錯的子孫組件的具體哪個地方報錯。（如，假如我沒有定義b這個變量，但是我去console.log(b) 這一句肯定會報錯，假如我把這句錯誤代碼寫在了created這個鉤子函數里，那第三個參數會返回就是：created hook）
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
生命周期函數是指在某一個周期自動執行的函數。
以下是React中的常用的生命周期函數，按個部分中按照自動執行順序列出，這幾個過程可能存在同時進行
consructor()里面初始化Props和State屬性。
componentWillMount()：在組件即將被掛載到頁面的時刻自動執行。
render()：將組件掛載到頁面。
componentDidMount()：組件被掛載到頁面之后立即執行。
componentWillReceiveProps()：一個組件要從父組件接收參數， 只要父組件的render()函數非首次（如果這個組件第一次存在與父組件中不會執行，如果已經存在于父組件中才會執行）執行了，子組件的這個生命周期函數就會被執行。如果組件沒有Props屬性則直接跳過
shouldComponentUpdate()：組件更行之前檢查是否需要更新，注意這個函數要有一個布爾類型返回值，如果返回false，這一部分的生周期 函數將不會繼續執行，即無論如何組件都不會更新。利用這個生命周期函數可以強制關閉不需要更新的子組件來提升渲染性能
componentWillUpdate()：組件更新之前。自動執行。但要在shouldComponentUpdate()執行并返回true之后執行。
render()：將組件更新到頁面。
componentDidUpdate():組件更新完成之后立即執行。
componentWillMount()：當組件即將被頁面剔除時執行。
render()也是生命周期函數，而constructor()并不是生命周期函數。
render()函數，其他的所有生命周期函數都可以不寫，也不會報錯，但是如果缺少render()函數程序就會報錯，因為所有的生命周期函數除了render()函數都是繼承自React中內置的。
componentDidMount()里面。
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
本組件基于element-ui 的圖標庫（星星圖標）
第一步：
vue + webpack + element-ui 框架
第二步：
創建Rate.vue文件，實現雙向綁定分數
第三部：
使用組件
在app.vue中引入組件
組件
說明
代碼
<Rate v-model='value' size="32px">
<span>{{value}} 分</span>
</Rate>
import Rate from './components/Rate'
<template>
<div class="Rating" :value='value'>
<ul class="Rating-list">
<li v-for="s in 5" @click="changeRate(s)">
<i :class="s <= star ? 'el-icon-star-on':'el-icon-star-off'" :style='style'></i>
</li>
</ul>
<slot></slot> <!--顯示用戶自定義內容-->
</div>
</template>
props: {
size: { //父組件傳值設置字體大小
type: String,
default: '16px'
},
value: { //綁定value，與$emit實現雙向綁定
type:Number,
default:0
}
},
data() {
return {
star: this.value, // 初始化
style: {
fontSize: this.size //通過prop傳值設置星星字體大小
}
}
},
methods: {
changeRate(s) {
this.star = s //更新當前星星數量
this.$emit('input', s); //將當前星星數量s與v-model綁定
}
}
demo演示
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
摘要: 什么是ATL(與COM的關系，及MFC與COM的關系)自從1993年Microsoft首次公布了COM技術以后，Windows平臺上的開發模式發生了巨大的變化，以COM為基礎的一系列軟件組件化技術將Windows編程帶入了組件化時代。廣大的開發人員在為COM帶來的軟件組件化趨勢歡欣鼓舞的同時，對于COM開發技術的難度和煩瑣的細節也感到極其的不便。COM編程一度被視為一種高不可攀的技術，令人望而卻步
什么是ATL (與COM的關系，及MFC與COM的關系)
自從1993年Microsoft首次公布了COM技術以后，Windows平臺上的開發模式發生了巨大的變化，以COM為基礎的一系列軟件組件化技術將Windows編程帶入了組件化時代。廣大的開發人員在為COM帶來的軟件組件化趨勢歡欣鼓舞的同時，對于COM開發技術的難度和煩瑣的細節也感到極其的不便。COM編程一度被視為一種高不可攀的技術，令人望而卻步。開發人員希望能夠有一種方便快捷的COM開發工具，提高開發效率，更好地利用這項技術。
針對這種情況，Microsoft公司在推出COMSDK以后，為簡化COM編程，提高開發效率，采取了許多方案，特別是在MFC（MicrosoftFoundationClass）中加入了對COM和OLE的支持。但是隨著Internet的發展，分布式的組件技術要求COM組件能夠在網絡上傳輸，而又盡量節約寶貴的網絡帶寬資源。采用MFC開發的COM組件由于種種限制不能很好地滿足這種需求，因此Microsoft在1995年又推出了一種全新的COM開發工具ATL。
ATL是ActiveX Template Library的縮寫，它是一套C++模板庫。使用ATL能夠快速地開發出、簡潔的代碼（Effectiveand Slimcode），同時對COM組件的開發提供最大限度的代碼自動生成以及可視化支持。為了方便使用，從MicrosoftVisual C++ 5.0版本開始，Microsoft把ATL集成到VisualC++開發環境中。1998年9月推出的Visual Studio 6.0 集成了ATL3.0版本。目前，ATL已經成為Microsoft標準開發工具中的一個重要成員，日益受到C++開發人員的重視。
ATL究竟給開發人員帶來了什么樣的益處呢？這還要先從ATL產生以前的COM開發方式說起。
在ATL產生以前，開發COM組件的方法主要有兩種：一是使用COMSDK直接開發COM組件，另一種方式是通過MFC提供的COM支持來實現。
直接使用COMSDK開發COM組件是最基本也是最靈活的方式。通過使用Microsoft提供的開發包，我們可以直接編寫COM程序。但是，這種開發方式的難度和工作量都很大，一方面，要求開發者對于COM的技術原理具有比較深入的了解（雖然對技術本身的深刻理解對使用任何一種工具都是非常有益的，但對于COM這樣一整套復雜的技術而言，在短時間內完全掌握是很難的），另一方面，直接使用COMSDK要求開發人員自己去實現COM應用的每一個細節，完成大量的重復性工作。這樣做的結果是，不僅降低了工作效率，同時也使開發人員不得不把許多精力投入到與應用需求本身無關的技術細節中。雖然這種開發方式對于某些特殊的應用很有必要，但這種編程方式并不符合組件化程序設計方法所倡導的可重用性，因此，直接采用COMSDK不是一種理想的開發方式。
使用MFC提供的COM支持開發COM應用可以說在使用COMSDK基礎上提高了自動化程度，縮短了開發時間。MFC采用面向對象的方式將COM的基本功能封裝在若干MFC的C++類中，開發者通過繼承這些類得到COM支持功能。為了使派生類方便地獲得COM對象的各種特性，MFC中有許多預定義宏，這些宏的功能主要是實現COM接口的定義和對象的注冊等通常在COM對象中要用到的功能。開發者可以使用這些宏來定制COM對象的特性。
另外，在MFC中還提供對Automation 和 ActiveXControl的支持，對于這兩個方面，VisualC++也提供了相應的AppWizard和ClassWizard支持，這種可視化的工具更加方便了COM應用的開發。
MFC對COM和OLE的支持確實比手工編寫COM程序有了很大的進步。但是MFC對COM的支持是不夠完善和徹底的，例如對COM接口定義的IDL語言，MFC并沒有任何支持，此外對于近些年來COM和ActiveX技術的新發展MFC也沒有提供靈活的支持。這是由MFC設計的基本出發點決定的。MFC被設計成對Windows平臺編程開發的面向對象的封裝，自然要涉及Windows編程的方方面面，COM作為Windows平臺編程開發的一個部分也得到MFC的支持，但是MFC對COM的支持是以其全局目標為出發點的，因此對COM的支持必然要服從其全局目標。從這個方面而言，MFC對COM的支持不能很好的滿足開發者的要求。
隨著Internet技術的發展，Microsoft將ActiveX技術作為其網絡戰略的一個重要組成部分大力推廣，然而使用MFC開發的ActiveXControl，代碼冗余量大（所謂的“肥代碼 FatCode”），而且必須要依賴于MFC的運行時刻庫才能正確地運行。雖然MFC的運行時刻庫只有部分功能與COM有關，但是由于MFC的繼承實現的本質，ActiveXControl必須背負運行時刻庫這個沉重的包袱。如果采用靜態連接MFC運行時刻庫的方式，這將使ActiveXControl代碼過于龐大，在網絡上傳輸時將占據寶貴的網絡帶寬資源；如果采用動態連接MFC運行時刻庫的方式，這將要求瀏覽器一方必須具備MFC的運行時刻庫支持?？傊甅FC對COM技術的支持在網絡應用的環境下也顯得很不靈活。
解決上述COM開發方法中的問題正是ATL的基本目標。
首先ATL的基本目標就是使COM應用開發盡可能地自動化，這個基本目標就決定了ATL只面向COM開發提供支持。目標的明確使ATL對COM技術的支持達到淋漓盡致的地步。對COM開發的任何一個環節和過程，ATL都提供支持，并將與COM開發相關的眾多工具集成到一個統一的編程環境中。對于COM/ActiveX的各種應用，ATL也都提供了完善的Wizard支持。所有這些都極大地方便了開發者的使用，使開發者能夠把注意力集中在與應用本身相關的邏輯上。
其次，ATL因其采用了特定的基本實現技術，擺脫了大量冗余代碼，使用ATL開發出來的COM應用的代碼簡練，即所謂的“SlimCode”。ATL在實現上盡可能采用優化技術，甚至在其內部提供了所有C/C++開發的程序所必須具有的C啟動代碼的替代部分。同時ATL產生的代碼在運行時不需要依賴于類似MFC程序所需要的龐大的代碼模塊，包含在最終模塊中的功能是用戶認為最基本和最必須的。這些措施使采用ATL開發的COM組件(包括ActiveXControl)可以在網絡環境下實現應用的分布式組件結構。
第三，ATL的各個版本對Microsoft的基于COM的各種新的組件技術如MTS、ASP等都有很好的支持，ATL對新技術的反應速度大大快于MFC。ATL已經成為Microsoft支持COM應用開發的主要開發工具，因此COM技術方面的新進展在很短的時間內都會在ATL中得到反映。這使開發者使用ATL進行COM編程可以得到直接使用COMSDK編程同樣的靈活性和強大的功能。
本文的目的就是希望在有限的篇幅中能夠使讀者對ATL的使用和基本原理有一個初步的了解，為廣大的COM開發人員更好地使用ATL開發起到拋磚引玉的作用。
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
用css隱藏頁面元素有許多種方法。
opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這一位著將opacity設置為0只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用，它也將響應用戶交互。
visibility
第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外元素在讀屏軟件中會被隱藏
注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為visible即可。
dispaly
display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦display設為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。
任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過度動畫是無效的，他的任何不同狀態值之間的切換總是會立即生效。
不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它。
position
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity和visibility影響布局mdisplay不影響布局但又無法直接交互）。在這種情況下，只能考慮將元素移出可視區域。這個辦法既不會影響布局，有可能讓元素保持可以操作。
隱藏元素的另一種方法是通過剪裁它們實現。
1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute
opacity
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
用css隱藏頁面元素有許多種方法。
opacity屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這一位著將opacity設置為0只能從視覺上隱藏元素。而元素本身依然占據它自己的位置并對網頁的布局起作用，它也將響應用戶交互。
visibility
第二個要說的屬性是visibility。將它的值設為hidden將隱藏我們的元素。如同opacity屬性，被隱藏的元素依然會對我們的網頁布局起作用。與opacity唯一不同的是它不會響應任何用戶交互。此外元素在讀屏軟件中會被隱藏
注意，如果一個元素的visibility被設置為hidden，同時想要顯示它的某個子孫元素，只要將那個元素的visibility顯式設置為visible即可。
dispaly
display屬性依照詞義真正隱藏元素。將display屬性設為none確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據任何空間。不僅如此，一旦display設為none任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產生的效果就像元素完全不存在。
任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過度動畫是無效的，他的任何不同狀態值之間的切換總是會立即生效。
不過請注意，通過DOM依然可以訪問到這個元素。因此你可以通過DOM來操作它。
position
假設有一個元素你想要與它交互，但是你又不想讓它影響你的網頁布局，沒有合適的屬性可以處理這種情況（opacity和visibility影響布局mdisplay不影響布局但又無法直接交互）。在這種情況下，只能考慮將元素移出可視區域。這個辦法既不會影響布局，有可能讓元素保持可以操作。
隱藏元素的另一種方法是通過剪裁它們實現。
1、opacity:0
2、visibility:hidden
3、diaplay:none
4、position:absolute
opacity
.hide {
position: absolute;
top: -9999px;
left: -9999px;
}
.hide {
clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
html與css:
<!DOCTYPE html>
</html>
JS:
var waterfall = function(wrap, boxes) {
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
/* 標簽重定義 */
* {
margin: 0;
padding: 0;
border: none;
}
body {
background: #ddd;
}
img {
border: none;
}
a {
text-decoration: none;
color: #444;
}
a:hover {
color: #999;
}
/* wrap */
#wrap {
position: relative;
width: auto;
height: auto;
margin: 0 auto;
}
#wrap>div {
float: left;
box-sizing: border-box;
width: 280px;
height: auto;
margin: 10px;
padding: 10px;
border-radius: 5px;
background: #fff;
}
#wrap>div>img {
width: 260px;
margin: 0 auto;
}
#wrap>div>a {
display: block;
font-size: 18px;
font-weight: bold;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrap">
<div>
<img src="img/1.jpg">
<a target="_blank">第一張 路飛與艾斯</a>
</div>
<div>
<img src="img/2.jpg">
<a target="_blank">第二張 艾博</a>
</div>
<div>
<img src="img/3.jpg">
<a target="_blank">第三張 路飛</a>
</div>
<div>
<img src="img/4.jpg">
<a target="_blank">第四張 艾斯</a>
</div>
<div>
<img src="img/5.jpg">
<a target="_blank">第五張 女王</a>
</div>
<div>
<img src="img/6.jpg">
<a target="_blank">第六張 香吉士</a>
</div>
<div>
<img src="img/7.jpg">
<a target="_blank">第七張 艾斯</a>
</div>
<div>
<img src="img/8.jpg">
<a target="_blank">第八張 霸氣</a>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
// 獲取屏幕可以顯示的列數
var boxWidth = boxes.eq(0).width() + 40;
var windowWidth = $(window).width();
var colsNumber = Math.floor(windowWidth / boxWidth);
// 設置容器的寬度
wrap.width(boxWidth * colsNumber);
// 定義一個數組并存儲每一列的高度
var everyHeight = new Array();
for (var i = 0; i < boxes.length; i++) {
if (i < colsNumber) {
everyHeight[i] = boxes.eq(i).height() + 40;
} else {
var minHeight = Math.min.apply(null, everyHeight);
var minIndex = getIndex(minHeight, everyHeight);
boxes.eq(i).css({
'position': 'absolute',
'top': minHeight,
'left': boxes.eq(minIndex).position().left,
'opacity': '0'
}).stop().animate({
'opacity': '1'
}, 1000);
everyHeight[minIndex] += boxes.eq(i).height() + 40;
};
}
};
// 獲取最小列的索引
function getIndex(minHeight, everyHeight) {
for (index in everyHeight) {
if (everyHeight[index] == minHeight) {
return index;
};
};
};
$(document).ready(function(event) {
var wrap = $('#wrap');
var boxes = $('#wrap').children('div');
waterfall(wrap, boxes);
});
如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里
控制表格的多選和反選，直接上代碼，順便安利一個小知識點：tr的底邊框不顯示的問題，解決辦法是：table{border-collapse:collapse;}
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<title></title>
-
<style>
-
*{margin:0;padding:0;}
-
table{border-collapse:collapse}
-
.detail_tb {width: 100%;border: 1px solid #ccc;}
-
.detail_tb .fied_header {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #ececec;}
-
.detail_tb .fied_header th {text-align: center;border-right: 1px solid #ccc;color: #333;font-size: 14px;}
-
.detail_tb .fied_header th input {vertical-align: middle;}
-
.detail_tb tr {height: 38px;line-height: 38px;border-left: none;border-bottom: 1px solid #ccc;background-color: #fff;}
-
.detail_tb tr td {text-align: center;border-right: 1px solid #ccc;color: #666;font-size: 14px;}
-
.detail_tb tr td input {float: left;margin: 12px 5px 0 10px;}
-
.detail_tb tr td span {float: left;}
-
.detail_tb tr td select {display: inline-block;width: 90px;height: 24px;}
-
</style>
-
-
</head>
-
<body>
-
-
<table class="detail_tb" >
-
<thead>
-
<tr class="fied_header">
-
<th width="65"><input type="checkbox" value="number" id="number"> 序號</th>
-
<th width="110">孩子姓名</th>
-
<th width="130">家長電話</th>
-
<th width="110">介紹人孩子姓名</th>
-
<th width="130">介紹人電話</th>
-
<th width="150">報名時間</th>
-
<th width="100">分組情況</th>
-
<th width="100">拉新數量</th>
-
<th width="100">是否簽到</th>
-
<th width="100">是否發獎</th>
-
</tr>
-
</thead>
-
<tbody id="tbody">
-
<tr>
-
<td width="65"><input type="checkbox" value="" id="" ><span>1</span></td>
-
<td width="110">張三</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分組</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">獎品1</option>
-
<option value="">獎品2</option>
-
</select>
-
</td>
-
</tr>
-
<tr>
-
<td width="65"><input type="checkbox" value="" id=""><span>2</span></td>
-
<td width="110">張四</td>
-
<td width="130">13888888888</td>
-
<td width="110">李四</td>
-
<td width="130">13888888888</td>
-
<td width="150">2016/08/6 21:00</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">未分組</option>
-
<option value="">1</option>
-
<option value="">2</option>
-
</select>
-
</td>
-
<td width="100">33</td>
-
<td width="100">是</td>
-
<td width="100">
-
<select name="" id="">
-
<option value="">否</option>
-
<option value="">獎品1</option>
-
<option value="">獎品2</option>
-
</select>
-
</td>
-
</tr>
-
<tbody>
-
</table>
-
-
-
<script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
-
<script type="text/javascript">
-
// 全選和反選
-
$("#number").click(function () {
-
var isChecked = $("#number").prop("checked");
-
$("#tbody input").prop("checked", isChecked);
-
})
-
-
// 單獨選項控制全選
-
$("#tbody input").click(function () {
-
var allLength = $("#tbody input").length;
-
var checkedLength = $("#tbody input:checked").length;
-
if(allLength == checkedLength){
-
$("#number").prop("checked",true);
-
}else {
-
$("#number").prop("checked",false);
-
}
-
});
-
</script>
-
-
</body>
-
</html>
-
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
藍藍設計的小編 http://www.syprn.cn