瀑布流总结

1.所有图片加载完毕后的判断

还是很早之前AK帮忙写的,自定义累加到最后再执行

2.图片排列  我自己知道原理也没有写出来

var c = Math.floor(w / iw);//计算列数
var oArr = [];
for (var i = 0; i < c; i++) {//把第一行排放好,并将每一列的高度记入数据oArr
    li[i].style.top = "0";
    li[i].style.left = iw * i + "px";
    li[i].style.opacity = "1";
    li[i].style["-moz-opacity"] = "1";
    li[i].style["filter"] = "alpha(opacity=100)";
    oArr.push(lenArr[i]);
}
for (var i = c; i < liLen; i++) {//将其他数据块定位到最短的一列后面,然后再更新该列的高度
    var x = _getMinKey(oArr);//获取最短的一列的索引值
    li[i].style.top = oArr[x] + mv + "px";
    li[i].style.left = iw * x + "px";
    li[i].style.opacity = "1";
    li[i].style["-moz-opacity"] = "1";
    li[i].style["filter"] = "alpha(opacity=100)";
    oArr[x] = lenArr[i] + oArr[x] + mv;//更新该列的高度
} 

3.获取数字数组最小值的索引  看清楚是索引

function _getMinKey(arr) {
    var a = arr[0];
    var b = 0;
    for (var k in arr) {
        if (arr[k] < a) {
            a = arr[k];
            b = k;
        }
    }
    return b;
} 
时间: 2024-11-08 02:11:27

瀑布流总结的相关文章

扩展版瀑布流

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>瀑布流-扩展版02</title> <style type="text/css"> * { margin: 0; padding: 0; } #list { list-style: none; position: relative; margin: 0 auto; }

PSCollectionView瀑布流实现

[-] 一基本原理 二具体实现 相关数据结构 视图更新方式 relayoutViews方法 removeAndAddCellsIfNecessary方法 select方法 重用数据块视图机制 三使用方法 四其他瀑布流实现 PSCollectionView是一个实现较简洁的仿Pinterest瀑布流iOS版实现,使用UIScrollView做容器,每列列宽固定,高度可变,使用方式类似UITableView.其效果如图: 一.基本原理 其基本实现原理为: 列数固定,根据列数每列存储一个当前列的高度值

自定义实现带文字标题的瀑布流效果

在网上能找到的大部分资料中的瀑布流效果都是单纯的照片实现,现在我来实现一个带文字标题的.效果如下: 每个item都是由图片和文字标题两部分组成. 布局方式为ScrollView里面嵌套一个水平方向的LinearLayout,里面再嵌套两个竖直方向的LinearLayout,然后判断竖直方向的两个LinearLayout的高度,向比较低的那个Linearlayout里面添加item. 下面是代码 <ScrollView xmlns:android="http://schemas.androi

1、网页后退 2、瀑布流 3、上下左右的阿斯科码值 4、加密技术

1.网页后退 /前进  <a href="javascript:history.go(-1);">后退</a><a href="javascript:history.go(1);">前进</a> 2.瀑布流              瀑布流是目前一种比较流行的页面布局和加载效果.百度,花瓣等一些好的网站都广泛用了这样一种效果,适用于单页面展示对内容的页面.这几天就跟着一些资料学习了一下瀑布流效果的制作.其原理是利用js

IOS 瀑布流UICollectionView实现

IOS 瀑布流UICollectionView实现 在实现瀑布流之前先来看看瀑布流的雏形(此方法的雏形 UICollectionView) 对于UICollectionView我们有几点注意事项 它和tableView不一样,ContentView的内容完全需要我们自己去添加. 它与tableview相比,他的初始化需要FlowLayout并且大部分操作在其上. UIcollectionView的实用性极强,虽然有时他并不是最好的解决方案,但是它可以很灵活的实现各种效果. 图(一) 如图,模拟器

自定义控件三部曲视图篇(三)——瀑布流容器WaterFallLayout实现

前言:只要在前行,梦想就不再遥远 系列文章: Android自定义控件三部曲文章索引:http://blog.csdn.net/harvic880925/article/details/50995268 前面两节讲解了有关ViewGroup的onMeasure.onLayout的知识,这节我们深入性地探讨一下,如何实现经常见到的瀑布流容器,本节将实现的效果图如下: 从效果图中可以看出这里要完成的几个功能: 1.图片随机添加 2.在添加图片时,总是将新图片插入到当前最短的列中 3.每个Item后,

【jQuery Demo】图片瀑布流实现

瀑布流就是像瀑布一样的网站——丰富的网站内容,特别是绚美的图片会让你流连忘返.你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮,一切的美妙的图片精彩便可呈现在你面前.瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest.美丽说.蘑菇街这类型的网站. 下面是效果: 核心内容: 1.先设置布局,主要HTML代码如下 <div id="container"> <div class="box"> <div class="co

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

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

jQuery瀑布流插件——jQuery.Waterfall

插件--jQuery.Waterfall 思路: 其实只要了解了整个流程,要实现这个插件也不难,大家都玩过俄罗斯方块吧,原理差不多,找到合适的地方叠上去就好了,在这里,每个块的宽度是必需给定的,然后计算出列数,再维护一个数组,存储每列的高度,往最小高度的列添加块即可.滚动时,当最小高度出现在可视窗口时就启动ajax从服务器拉取更多的数据. 注意的地方: 如果瀑布流的块中包含图片,则需要事先知道图片的高度(其实就是为了要计算出整个块的高度,以便精确定位),图片的高度可以从服务器返回,本插件是整合p

js瀑布流(定位法)

1.首先,自己写好图片路径,引入jquery <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } ul{ position: relative; width: 860px; margin: 0