CSS _ CSS 图片流

CSS 图片流

JerkZ画作

文远楼

刻板画

威尼斯意象

图片流

如果像上面一样展示图片类信息流，让图片像瀑布一样，滔滔不绝，又犹如黄河决堤，一发不可收拾……

<html>
<head>
<style>
div.gallery {
    margin: 5px;
    border: 1px solid #ccc;
    float: left;
    width: 180px;
}

div.gallery:hover {
    border: 1px solid #777;
}

div.gallery img {
    width: 100%;
    height: 250px;
}

div.desc {
    padding: 15px;
    text-align: center;
}
</style>
</head>
<body>

<div class="gallery">
  <a target="_blank" href="https://logo.zhuanfou.com/draw_by_jerkz.jpg">
    <img src="https://logo.zhuanfou.com/draw_by_jerkz.jpg" alt="raw_by_jerkz">
  </a>
  <div class="desc">JerkZ画作</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://logo.zhuanfou.com/ex_wenyuan.jpeg">
    <img src="https://logo.zhuanfou.com/ex_wenyuan.jpeg" alt="文远楼">
  </a>
  <div class="desc">文远楼</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://logo.zhuanfou.com/ex_keban.jpeg">
    <img src="https://logo.zhuanfou.com/ex_keban.jpeg" alt="刻板画">
  </a>
  <div class="desc">刻板画</div>
</div>

<div class="gallery">
  <a target="_blank" href="https://logo.zhuanfou.com/ex_venice.jpeg">
    <img src="https://logo.zhuanfou.com/ex_venice.jpeg" alt="Venice">
  </a>
  <div class="desc">威尼斯意象</div>
</div>

</body>
</html>

运行一下

注意注意，此处只是简单的实现。要想真正做好图片的信息流排列，这需要更复杂的设计，因为会涉及到的问题很多。这节并不重要，将来有机会再补充更多。

CSS 图片流

推广