图片瀑布流

图片瀑布流,简单的说就是不受图片高度的影响,能够保证图片不被压缩或者变形,让它自然的铺展开来;之前有在网上看到过最假的瀑布流,如图:
1.png
一个大的div包裹左右两个小的div,两个小的div使用flex或者float等技术并列,然后在div里面放置图片,我想问,这不是骗人么。。。。
正确的瀑布流应该就是下面这样的,如图:
2.png

思路

这里我们会用到position的absolute,首先,第一列的第一行的第一张,肯定是left:0;top:0的,那么第一行的top值是0,第一列的left也为0;然后左边就是第一行的第二张图片的left值肯定就是距离第一行的第一张图片的宽度(当然,你加上margin也无可厚非);那么第一列的第二张图片的top值肯定就是第一列的第一张图片的高度值,然后依次类推。。。就能够让图片按照我们的想法来排列了。。。

HTML

<div class="box">
    <div class="item"><img src="images/1.jpg"/></div>
    <div class="item"><img src="images/2.jpg"/></div>
    <div class="item"><img src="images/3.jpg"/></div>
    <div class="item"><img src="images/4.jpg"/></div>
    <div class="item"><img src="images/5.jpg"/></div>
    <div class="item"><img src="images/6.jpg"/></div>
    <div class="item"><img src="images/7.jpg"/></div>
    <div class="item"><img src="images/8.jpg"/></div>
    <div class="item"><img src="images/9.jpg"/></div>
    <div class="item"><img src="images/10.jpg"/></div>
    <div class="item"><img src="images/11.jpg"/></div>
    <div class="item"><img src="images/12.jpg"/></div>
    <div class="item"><img src="images/13.jpg"/></div>
    <div class="item"><img src="images/14.jpg"/></div>
</div>

代码很简单,就是一个大的div包裹了一堆小的div,小div里面在放的图片;

CSS

css.png

CSS的代码很简单,就是让小的div能够根据父div进行定位,设置宽度就是为固定图片显示的宽度而已,(此处的transition别忘了写 css Hack ),然后小div里面的图片根据父元素的div100%放大就行

Javascript

js.png

大致的逻辑就是获取图片的真实宽高,然后去计算每一张图片在行列所在的位置,也就是距离顶部(top)和左边(left)的值,然后去动态改变图片的top 和left值

最后,实际效果如下:
22.gif
22.wmv

更新了Markdown编辑器,不知道抽什么风,识别不了大括号。。。只能用图片了

仅有 1 条评论
添加新评论

icon_mrgreen.gificon_neutral.gificon_twisted.gificon_arrow.gificon_eek.gificon_smile.gificon_confused.gificon_cool.gificon_evil.gificon_biggrin.gificon_idea.gificon_redface.gificon_razz.gificon_rolleyes.gificon_wink.gificon_cry.gificon_surprised.gificon_lol.gificon_mad.gificon_sad.gificon_exclaim.gificon_question.gif