将Flickr图像拉入网站jsd

Question

我目前在这里有一个网站：http://photo.tomhightower.com有一个带有格式的照片库和在html中硬编码的网址。我真的很喜欢，用我的flickr页面填充图片（通过标签）

我已经看过使用BlueImp的图库和JsFlickrGallery，但我仍然对javascript很新，并且无法弄清楚如何将图片加载到布局中

非常感谢任何帮助，我可以发布任何其他需要的信息

谢谢！

主容器div（包含23张图片＆＃34; single_work＆＃34;，我只是在这篇文章中放了两个作为例子：

<!-- main container -->
<div class="main-container portfolio-inner clearfix">
    <!-- portfolio div -->
    <div class="portfolio-div">
        <div class="portfolio">
            <!-- portfolio_filter -->
            <div class="categories-grid wow fadeInLeft">
                <nav class="categories text-center">
                    <ul class="portfolio_filter">
                        <li><a href="" class="active" data-filter="*">Home</a></li>
                        <li><a href="" data-filter=".people">People</a></li>
                        <li><a href="" data-filter=".places">Places</a></li>
                        <li><a href="" data-filter=".things">Things</a></li>
                        <li><a href="" data-filter=".animals">Animals</a></li>
                        <li><a href="" data-filter=".space">Space</a></li>
                    </ul>
                </nav>
            </div>
            <!-- portfolio_filter -->

            <!-- portfolio_container -->
            <div class="no-padding portfolio_container clearfix">

                <!--SINGLE_WORK-->
                <div class="col-md-4 col-sm-6 space">
                    <a href="imgPages/3073e90f21_b.html" class="portfolio_item">
                        <img src="https://c1.staticflickr.com/1/509/31997259320_3073e90f21_b.jpg" alt="image" class="img-responsive" />
                        <div class="portfolio_item_hover">
                            <div class="portfolio-border clearfix">
                                <div class="item_info">
                                    <span>Star Trails</span>
                                    <em>Space</em>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!--end sw-->

                <!--SINGLE_WORK-->
                <div class="col-md-4 col-sm-6 things">
                    <a href="imgPages/eceb690c13_b.html" class="portfolio_item">
                        <img src="https://c2.staticflickr.com/6/5712/30822910710_eceb690c13_b.jpg" alt="image" class="img-responsive" />
                        <div class="portfolio_item_hover">
                            <div class="portfolio-border clearfix">
                                <div class="item_info">
                                    <span>BottleCap Suite</span>
                                    <em>Things</em>
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
                <!--end sw-->

            </div>
            <!-- end portfolio_container -->
        </div>
        <!-- portfolio -->
    </div>
    <!-- end portfolio div -->
</div>
<!-- end main container -->

我真的只想在上面制作img src / title＆＃34; SINGLE_WORK＆＃34; s从flickr更新