Python爬虫实战笔记_4-3 Semantic UI

Reference:
Semantic UI

Get problem when install GULP, below are references to solve it.
learnsemantic
npm instll gulp
installing-npm-packages-globally
fixing-npm-permissions
About how to solve "Command not found"

My Pinterest layout

• Firstly,
  .
• Secondly,
  , use a 'five column grid' to make the page show five columns in a row.
• Then, there are five
  to represent each column.
• Lastly, in each column, put numbers of
  to make it the layout of 'pinterest'

    

        

            

                    

                        
                    
                

                    

                        Elliot Fu
                    
                    

                        Friends of Veronika
                    
                    

                         Elliot 
                    
                
                

                    extra
                
            
            
...
            ...
        
        

            
...
            ...
        
        

            
...
            ...
        
        ....
    

The structure, though ugly.

Screen Shot 2016-07-23 at 10.38.02 AM.png

Define a new view in views.py

Separate all data into five parts, each for one column.

def zinterest(request):
    mdata = ZufangList.objects
    length = len(mdata)
    each = int(length /5)
    datalist = []
    for i in range(5):
        datalist.append(mdata[0 + each * i: each + each * i])
    context = {
        'zindata': mdata,
        'c1': datalist[0],
        'c2': datalist[1],
        'c3': datalist[2],
        'c4': datalist[3],
        'c5': datalist[4],
    }
    return render(request, 'zinterest.html', context)

最终效果

用从小猪爬取到的数据生成页面

页中

Screen Shot 2016-07-23 at 12.40.48 PM.png

页尾

Screen Shot 2016-07-23 at 12.52.11 PM.png