瀑布流布局_技术问答

首页免费课瀑布流布局问答

瀑布流布局

                
                Amy
            
                    查看讲师更多课程 
                    Amy讲师的其他课程
                
CSS3实现漂亮ToolTips效果
初级·42721
免费课程
                                
css3实现网页平滑过渡效果
初级·54368
免费课程
                                
CSS3实现“图片阴影”效果
初级·34769
免费课程
                                
Tab选项卡切换效果
初级·65464
免费课程
                                
DOM事件探秘
中级·99542
免费课程
                                
                难度初级
            
                时长 2小时 0分
            
                学习人数
            
综合评分9.63
                            324人评价
                        查看评价
                                9.8
                                内容实用
                            
                                9.6
                                简洁易懂
                            
                                9.5
                                逻辑清晰

全部评论问答未解决精华

Jakki

//获取上一行最短图片的位置
function getminHIndex(arr,minH){
for(var i in arr){
if(arr[i]==minH){
return i;
}
}
}

0 2-7 编程练习

2016-02-17

Jakki

var minH=Math.min.apply(null,boxH);
var minHIndex=getminHIndex(boxH,minH);
boxs[i].style.position = "absolute";
boxs[i].style.top = (minH+marginLeft)+"px";
boxs[i].style.left=(boxs[minHIndex].offsetLeft-marginLeft)+'px';
boxH[minHIndex]+=boxs[i].offsetHeight+marginLeft;//更新添加了块框后的列高
}}}

0 2-7 编程练习

2016-02-17

Jakki

var row_num = Math.floor(document.documentElement.clientWidth/boxW);
parent.style.cssText="width:"+boxW*row_num+"px;margin:0 auto;";
var boxH = new Array;
for(var i=0;i<boxs.length;i++){
if(i<row_num){
boxH.push(boxs[i].offsetHeight);//第一行不用考虑排列，先获取值
console.log(boxH[i]);
}else{

0 2-7 编程练习

2016-02-17

Jakki

function rank(parent,cls){
var parent =document.getElementById(parent);
var boxs = parent.getElementsByClassName("box");
var marginLeft = parseInt(getStyle(boxs[0],"marginLeft"))
var boxW = boxs[0].offsetWidth + marginLeft*2;

0 2-7 编程练习

2016-02-17

Jakki

for(var i=0;i<dataInt.data.length;i++){ var box=document.createElement('div');
box.className='box'; main.appendChild(box); var img=document.createElement('img');
img.src='./images/'+dataInt.data[i].src; box.appendChild(img);
} rank('main','box'); }; }}

0 2-7 编程练习

2016-02-17

Jakki

0 2-7 编程练习

2016-02-17

Jakki

0 2-7 编程练习

2016-02-17

Jakki

0 2-7 编程练习

2016-02-17

耐斯兔米丘

图裂了。。。

0 2-7 编程练习

2016-02-17

耐斯兔米丘

阿西吧，中文引号是什么鬼，早点看评论好了

0 2-6 编程练习

2016-02-17

麦尔丹

len1....

1 2-6 编程练习

2016-02-12

qq_e累_0

比着老师打的打出来的

0 5-2 编程挑战

2016-02-04

昨天de梦

补充：
$(window).on("resize", waterfall);

if(index < cols) {
$(value).removeAttr("style"); //移除style样式，配合 resize 事件（窗口变化时触发）

hArr[index] = h;
} else {

1 3-2 jQuery实现瀑布流布局的图片加载功能

2016-02-04

流星酱

ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ด้้้้้็็็็็้้้้้็็็็็้้้้้็็็้็็็ฏ๎็็

0 3-1 jQuery实现瀑布流布局图片定位

2016-02-03

sophie_wu

老师讲的很好，也很详细，要是写js的时候注意一下代码的执行效率就更好了

0 3-2 jQuery实现瀑布流布局的图片加载功能

2016-02-03

首页上一页 46 47 48 49 50 51 52 下一页尾页

开始学习

课程须知: 1.你一定对HTML+CSS比较熟悉； 2.掌握一定的JS基础知识，尤其是函数封装、调用等知识； 3.对jQuery相关知识掌握。

老师告诉你能学到什么？: 1.学会实现瀑布流布局实现的三种方式； 2.div如何定位和排序； 3.掌握CSS3中多栏布局的知识。

微信扫码，参与3人拼团

热搜

最近搜索清空

瀑布流布局