javascript - 自动排序和调整图片库中的图像

标签 javascript php jquery html css

我正在处理画廊,我希望它能够动态排序和调整大小(使用原始比例)。在帖子的末尾,我添加了一张描述我想要的图片。

现在我有这段代码,其中包含包含所有照片的数组以及应该显示它们的代码:

<?php
    $works = array(
        1 => array("Chill", "elenby", "http://fc03.deviantart.net/fs71/i/2014/008/f/4/chill_by_elenby-d71g75m.jpg", "http://isrart.co.il/showthread.php?t=12072"),
        2 => array("Fenix", "Elis", "http://ufu.co.il/files/aydw724j81kcd2zx3az0.jpg", "http://isrart.co.il/showthread.php?t=12070"),
        3 => array("Dont panic", "Tzah", "http://oi41.tinypic.com/vwrjly.jpg", "http://isrart.co.il/showthread.php?t=12084"),
        4 => array("Summer Jam", "elenby", "http://fc09.deviantart.net/fs70/i/2014/003/7/3/summer_jam_by_elenby-d70q8sy.jpg", "http://isrart.co.il/showthread.php?t=12052"),
        5 => array("Ancient Facts", "Dangle", "http://isrart.co.il/attachment.php?attachmentid=4173&d=1388471618", "http://isrart.co.il/showthread.php?t=12032"),
        6 => array("SAVIOR", "daskull", "http://25.media.tumblr.com/c8d55b4371ad32250129e4e1aae530b6/tumblr_mzf8alBIOe1s4jk9mo1_1280.png", "http://isrart.co.il/showthread.php?t=12106"),
        7 => array("BFF", "roni yoffe", "http://isrart.co.il/attachment.php?attachmentid=4211&d=1389791848", "http://isrart.co.il/showthread.php?t=12108"),
        8 => array("New York City", "ChananGrenblatt", "https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-prn1/1492578_244031302429143_693411241_o.jpg", "http://isrart.co.il/showthread.php?t=12090"),
        9 => array("Envato", "impact", "http://fc09.deviantart.net/fs71/f/2014/005/7/2/envato_by_impact_design-d70ylnm.png", "http://isrart.co.il/showthread.php?t=12068"),
        10 => array("Crismes", "Tali", "http://ufu.co.il/files/i7ehgj692t5i3m6txrv0.jpg", "http://isrart.co.il/showthread.php?t=12031")
    );
    $date = "January 2014";
?> 

<html>
    <head>
        <title><?php echo $date; ?></title>
        <meta charset="UTF-8">
        <meta name="author" content="Vlad Gincher">
        <link rel="shortcut icon" href="favicon.ico">
        <link rel="stylesheet" href="bestofthemonth.css">
    </head>
    <body>
        <div class="body">
            <img src="isrart.png" alt="Isrart" title="<?php echo $date; ?>" /><br />
            <h1><?php echo $date; ?></h1>
            <div>
                <?php
                for ($i = 1; $i < count($works); $i++){
                    echo '
                        <div id="work'.$i.'">
                            <img src="'.$works[$i][2].'" alt="" />
                        </div>
                    ';
                }
                ?>
            </div>
        </div>
    </body>
</html>

这是图片(在代码中我将使用更少的图片): How I want it to be like

最佳答案

如本解决方案中所用?

Demo

Tutorial

关于javascript - 自动排序和调整图片库中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21267818/

相关文章:

javascript - 优化 Gulp 任务

php - URL Mod 重写

javascript - 如何在加载页面时打开面板

php - 如何获取 option_name 的值并显示在前端?

javascript - 带图标的 Bootstrap 复选按钮不起作用

javascript - 如何根据 FireFox 中的月/日/年下拉列表获取年龄

javascript - 用不同颜色突出显示的功能

javascript - 使用 HttpInterceptor 的 Angular 1.5 超时

javascript - Node js |使用外部文件作为响应发送?

php - MySQL 子查询错误 : SQLSTATE[42S21]: