创建类似 http://ithinkimight.com/ 随机大小排布界面

[LoeiFy]

ithinkimight.com 这个网站图片来自 Instagram，图片随机大小，位置也是随机，图片可以重叠，但是并没有 过分 重叠。这种随机大小，位置排版页面元素跟平常的整齐 grid 或者 瀑布流 风格很不一样，下面我们尝试一下实现类似效果

从网站源文件上看并不能看出网站是如何随机排布这些图片，因为是后端直接输出图片的位置参数，并不是前端实现的位置计算。不过这里有一种简单方法，可以实现类似效果。先看一下具体效果

例子以及实际运用效果

http://jsfiddle.net/am0200/1mn5xbf8/

http://stone.am0200.com/

实现思路

首先把 container 划分为 4 个块，然后需要随机定位的 4 个块分别放到这 4 个区域，最后定义这 4 个块距离左边跟上边的最远，最近距离即可

实现代码

html 部分，我们只是生成 4 个容器，每个容器都可以放置一张图片

<section>
    <div id="d0"></div>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3"></div>
</section>

css 部分，我们使用绝对定位来设置每个容器的主要位置

section {
    width: 100%;
    height: 100%;
    position: relative;
}
section div {
    position: absolute;
}
#d0 {
    left: 50%;
    top: 0;
}
#d1 {
    top: 50%;
    left: 50%;
}
#d2 {
    left: 0;
    top: 50%;
}
#d3 {
    left: 0;
    top: 0;
}

js 部分，我们设置 4 个块随机大小，并且随机上下左右距离，需要注意的是，这个距离是有一定的范围的

function rd(n,m){
    var c = m-n+1;  
    return Math.floor(Math.random() * c + n);
}

var w = parseInt($('section').width()),
    h = parseInt($('section').height());

$('div').each(function() {
    var wh = rd(150, 200)
    $(this).css({
        width: wh,
        height: wh
    })
})

var d0 = parseInt($('#d0').width()),
    d1 = parseInt($('#d1').width()),
    d2 = parseInt($('#d2').width()),
    d3 = parseInt($('#d3').width());

var a1 = rd(-(d0 / 4), w / 2 - d0),
    a2 = rd(0, h / 2 - d0 / 4 * 3);

var b1 = rd(-(d1 / 4), w / 2 - d1),
    b2 = rd(-(d1 / 4), h / 2 - d1);

var c1 = rd(0, w / 2 - d2 / 4 * 3),
    c2 = rd(-(d2 / 4), h / 2 - d2);    

var e1 = rd(0, w / 2 - d3 / 4 * 3),
    e2 = rd(0, h / 2 - d3 / 4 * 3); 

$('#d0').css('margin-left', a1 +'px')
$('#d0').css('margin-top', a2 +'px')

$('#d1').css('margin-left', b1 +'px')
$('#d1').css('margin-top', b2 +'px')

$('#d2').css('margin-left', c1 +'px')
$('#d2').css('margin-top', c2 +'px')

$('#d3').css('margin-left', e1 +'px')
$('#d3').css('margin-top', e2 +'px')

其他问题

这种定位简单方便，但是如果是单数块的时候，就要做一下相关处理了

[pdhoward]

heeelo