基于jQuery图片自适应排列显示代码

基于jQuery图片自适应排列显示代码。这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果。效果图如下：

在线预览    源码下载

实现的代码。

html代码：

<div style="max-width:900px;margin:auto;padding:0 10px">  <h3>演示样式一</h3></div><div style="max-width:908px;margin:auto;padding:0 10px 10px">  <div id="demo1" class="flex-images">    <div class="item" data-w="219" data-h="180"><img src='/images/loading.gif' data-original="images/1.jpg"></div>    <div class="item" data-w="279" data-h="180"><img src='/images/loading.gif' data-original="images/2.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="images/3.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="images/4.jpg"></div>    <div class="item" data-w="147" data-h="180"><img src='/images/loading.gif' data-original="images/5.jpg"></div>    <div class="item" data-w="276" data-h="180"><img src='/images/loading.gif' data-original="images/6.jpg"></div>    <div class="item" data-w="319" data-h="180"><img src='/images/loading.gif' data-original="images/7.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="images/8.jpg"></div>    <div class="item" data-w="240" data-h="180"><img src='/images/loading.gif' data-original="images/9.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="images/10.jpg"></div>    <div class="item" data-w="240" data-h="180"><img src='/images/loading.gif' data-original="images/11.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="images/12.jpg"></div>    <div class="item" data-w="283" data-h="180"><img src='/images/loading.gif' data-original="images/13.jpg"></div>    <div class="item" data-w="271" data-h="180"><img src='/images/loading.gif' data-original="images/14.jpg"></div>    <div class="item" data-w="258" data-h="180"><img src='/images/loading.gif' data-original="images/15.jpg"></div>  </div></div><div style="max-width:900px;margin:auto;padding:0 10px 50px">  <h3>演示样式二</h3>  <div id="demo2" class="flex-images">    <div class="item" data-w="219" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/1.jpg"></div>    <div class="item" data-w="279" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/2.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/3.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/4.jpg"></div>    <div class="item" data-w="147" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/5.jpg"></div>    <div class="item" data-w="276" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/6.jpg"></div>    <div class="item" data-w="319" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/7.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/8.jpg"></div>    <div class="item" data-w="240" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/9.jpg"></div>    <div class="item" data-w="270" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/10.jpg"></div>    <div class="item" data-w="240" data-h="180"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/11.jpg"></div>  </div>  <p style="margin:60px 0 8px">演示样式三</p>  <div id="demo4" class="flex-images">    <div class="item" data-w="219" data-h="197">      <div class="img"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/1.jpg"></div>      <div class="bottom">Caption 1</div>    </div>    <div class="item" data-w="279" data-h="197">      <div class="img"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/2.jpg"></div>      <div class="bottom">Caption 2</div>    </div>    <div class="item" data-w="270" data-h="197">      <div class="img"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/3.jpg"></div>      <div class="bottom">Caption 3</div>    </div>    <div class="item" data-w="270" data-h="197">      <div class="img"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/4.jpg"></div>      <div class="bottom">Caption 4</div>    </div>    <div class="item" data-w="147" data-h="197">      <div class="img"><img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/5.jpg"></div>      <div class="bottom">Caption 5</div>    </div>  </div>  <p style="margin:60px 0 8px">演示样式四</p>  <div id="demo5" class="flex-images">    <div class="item" data-w="219" data-h="180">      <img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/1.jpg">      <div class="over">Caption 1</div>    </div>    <div class="item" data-w="279" data-h="180">      <img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/2.jpg">      <div class="over">Caption 2</div>    </div>    <div class="item" data-w="270" data-h="180">      <img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/3.jpg">      <div class="over">Caption 3</div>    </div>    <div class="item" data-w="270" data-h="180">      <img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/4.jpg">      <div class="over">Caption 4</div>    </div>    <div class="item" data-w="147" data-h="180">      <img src='/images/loading.gif' data-original="blank.gif" data-src='/images/loading.gif' data-original="images/5.jpg">      <div class="over">Caption 5</div>    </div>  </div>  <p style="margin:60px 0 8px">演示样式五</p>  <div id="demo6" class="flex-images">    <div class="item" data-w="450" data-h="300">      <a target="_blank" href="http://sc.chinaz.com">        <img src='/images/loading.gif' data-original="images/1.jpg">      </a>    </div>    <div class="item" data-w="450" data-h="437">      <a target="_blank" href="http://sc.chinaz.com">        <img src='/images/loading.gif' data-original="images/2.jpg">      </a>    </div>    <div class="item" data-w="450" data-h="300">      <a target="_blank" href="http://sc.chinaz.com">        <img src='/images/loading.gif' data-original="images/3.jpg">      </a>    </div>    <div class="item" data-w="450" data-h="298">      <a target="_blank" href="http://sc.chinaz.com">        <img src='/images/loading.gif' data-original="images/4.jpg">      </a>    </div>  </div>  <p style="margin:15px 0 5px">演示样式六</p>  <div>    <img style="max-width:100%" src='/images/loading.gif' data-original="images/1.jpg">  </div></div>

via：http://www.w2bc.com/Article/44440

原标题：基于jQuery图片自适应排列显示代码

关键词：jquery